I'm looking for a solution for a bootstrap accordion with a button to expand the accordion, but I would like to hide this button when it is expanded.
My accordion headline is like the beginning of the text inside of the accordion, and if I have the button there it is disturbing the view.
How can I hide this button when the accordion is expanded, but visible again when the accordion is collapsed?
The problem here is, that when I click on the title, to close the accordion, then the button remains disappeared, and if I click on the title again, the accordion will expand, but the title will disappear as well. If Possible, I would like to keep the title as link.
a[data-toggle='collapse'].collapsed {
visibility: visible;
}
a[data-toggle='collapse'] {
visibility: hidden;
}
This is what I have so far:
https://jsfiddle.net/o93kwj80/2/
Thanks
How will you close the accordion if you hide the title? I made a solution for you. If you click on the title, the title will be hidden and a close icon will show up. Then click on the close icon and the title will show up and accordion will be closed and close icon will be hidden.
a[data-toggle='collapse'].collapsed .title {
display: block;
}
a[data-toggle='collapse'].collapsed .close {
display: none;
}
a[data-toggle='collapse'] .title {
display: none;
}
a[data-toggle='collapse'] .close {
display: initial;
}
.close {
float: right;
color: red;
}
Please check the updated fiddle:
https://jsfiddle.net/o93kwj80/3/
Related
Iv'e created a dropdown that requires you to click on text to show more text underneath. The code is:
.dropbtn {
cursor: pointer;
font-weight: bold;
}
.dropdown03 {
position: relative;
display: inline-block;
text-align: left;
width: 100%;
}
.dropdown-content03 {
display: none;
position: relative;
width: 100%;
overflow: auto;
z-index: 1;
}
.show {display: block;}
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content03");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div class="dropdown03">
<button onclick="myFunction()" class="dropbtn">Dropdown Button Text</button>
<div id="myDropdown" class="dropdown-content03">
Dropdown Button Text
</div>
</div>
This code has works perfectly in my website and when you click on "Dropdown Button Text" then "Dropdown Button Text" appeasers below it. Here is my trouble; when i add another dropdown using the same code, the first dropdown on the website will show but the one that the button is above doesn't. In other words when i add more then one dropdown all the new ones don't work they only end up showing the first dropdowns content. (hopefully this makes sense)
How can i have more than one dropdown that will load is own content when clicked? Do i have to create a whole new tag for each one?
Changing the names of id's and classes would help. just try by doing so. Also check for the console by clicking the inspect button. Take a look at your HTML from inspect tab. Make sure there are no errors in the console.
Make sure while reloading the browser, your hard refresh by Ctrl+F5.
I have a navbar that I'm building with bootstrap based off this W3Schools example here.
When you are looking at the menu collapsed on a small screen, it looks like this:
And if you don't click off of the dropdown and expand the screen, the dropdown stays open.
Question:
Is there a way to force close a dropdown menu when you switch from one a small screen to larger one?
Why I want to do this:
For my current navbar, I wrote a media query so that when you hover over the dropdown on desktops, you see the menu. I also disabled the the top menu item so the user can't click it.
I have that hover there and I disabled the top link so users don't have to click to open or close the dropdown menu. And that works fine...until you go to a smaller screen size, click the dropdown and then expand the screen again. At that point, the dropdown is open and you have to click off of it again. I want the dropdown to close so the screen is expanded (then the user can go back to hovering over the dropdown menu).
Not sure if this is helpful, but this is the media query I wrote for the large screen/desktop behavior:
#media(min-width: 768px) {
/**Background link hover**/
.navbar .navbar-nav > li:hover:after{
width: 100%;
background: black;
}
.navbar .navbar-nav > li:after{
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.dropdown{
position: relative;
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
position: absolute;
}
.disabled-desktop-link {
pointer-events: none;
cursor: default;
}
}
You'll just want a JS event listener on the window, which fires when you resize the window.
Read into this - https://developer.mozilla.org/en-US/docs/Web/Events/resize
As you can see, you add a class open to your li.dropdown when you click on it.
So, what you you can do is to remove the class open when you resize your window.
Here is a simple way to do it :
var windowWidth = $(window).width();
$(window).resize(function() {
if (windowWidth >= 992) // the width you want
$(".dropdown").removeClass('open');
});
Here is a jsfiddle :https://jsfiddle.net/5oquf01q/3/
I'm currently in a project developing an Angular SPA that has dropdown menus in its main navbar. To get this effect, we are using CSS: hover selectors. The issue is that when an action is performed within this dropdowns we would like to close them without hindering the ability to open them again. For example, if a user opens a link within one of this dropdowns (internal link with ui-sref) he is then taken to this particular state, but the dropdown would still be visible until he moves the mouse outside it (and partially obscuring the new content shown). We would like the dropdown to be closed when an action within is performed and if the user would like to open it again, he would be able to hover the mouse again over the trigger.
We tried removing and re-adding classes (even after a timeout) but the dropdown reappears again.
Link to a Plunker with a setup similar to what we are trying to accomplish: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
And the relevant portions (Angular controller omitted as it has no content):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Thanks!
Finally solved it by using ng-mousenter and ng-mouseleave and dropping CSS :hover rules. As everything is based on JS I can just trigger mouseleave when I want to close them.
I have a hidden div which get's displayed when a radio button is clicked, However the paragraph beneath it gets pushed down when I make the div visible, is there any way that I can have the paragraph pushed down even when the div is hidden, so that it doesn't move? Here is my code
HTML
<div id="container">Hello</div>
<p>Click the button below to view content</p>
<input type="radio" onclick="displayDiv()">
CSS
#container {
display: none;
color: #fff;
font-size: 30px;
}
Javascript
function displayDiv() {
document.getElementById("container").style.display = "block";
}
Change the property display by visibility; its purpose is to place the div as if it was on the page, but rendering it invisible if you give it a value of "hiden".
See this
CSS:
#container {
visibility: hidden;
}
JavaScript
function displayDiv() {
document.getElementById("container").style.visibility = "visible";
}
I am currently installing a new website with a "max mega menu". The problem is, I can't get the submenu to show. I've tried with different z-index but I can't get it to work.
The second problem is, that the search menu is displaying on a new line. I want it on the same height as the main menu. How can i manage that?
This is the website: Link
Any help is appreciated...
by default submenus are set as display none and when mouse hover its set as display block but in your css you are set one more css as below as visibility hidden so just remove this
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega- sub-menu {
display: block;
opacity: 1;
visibility: hidden;// just remove this
}
hope this helps
You have in css:
visibility: hidden; set. Becouse of that elements of menu is invisible
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega-sub-menu
{
display: block;
visibility: hidden;
opacity: 1;
}
Just change it.
To solve search menu new line problem set float: left to #mega-menu-wrap-main_menu
#mega-menu-wrap-main_menu {
float: left;
}