Bootstrap provides classes for toggling content. See bootstrap/less/utilities.less.
I'm completely new to jQuery, and after reading their documentation I came to another solution to combine Bootstrap + jQuery.
First, the solution to 'hide' and 'show' an element (class wsis-collapse) when clicking on another element (class wsis-toggle), is to use .toggle.
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle();
});
});
You already have hidden the element .wsis-collapse
by using Bootstrap (V3) class .hidden
also:
.hidden {
display: none !important;
visibility: hidden !important;
}
When you click on .wsis-toggle
, the jQuery is adding an inline style:
display: block
Because of the !important
in the Bootstrap, this inline style has no effect, so we need to remove the .hidden
class, but I won't recommend .removeClass
for this! Because when jQuery is going to hide something again, it's also adding an inline style:
display: none
This is not the same as the .hidden class of Bootstrap, which is optimized for [assistive technology][3] as well (screen readers). So, if we want to show the hidden div, we need to get rid of the .hidden
class of Bootstrap, so we get rid of the important statements, but if we hide it again, we want to have the .hidden
class back again! We can use .toggleClass for this.
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
This way you keep using the hidden class every time the content is hidden.
The .show
class in Bootstrap is actually the same as the inline style of the jQuery, both 'display: block'
. But if the .show
class at some point will be different, then you simply add this class as well:
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});