The right answer
Bootstrap 4.x
Bootstrap 4.x uses the new .d-none
class. Instead of using either .hidden
, or .hide
if you’re using Bootstrap 4.x use .d-none
.
<div id="myId" class="d-none">Foobar</div>
- To show it:
$("#myId").removeClass('d-none');
- To hide it:
$("#myId").addClass('d-none');
- To toggle it:
$("#myId").toggleClass('d-none');
(thanks to the comment by Fangming)
Bootstrap 3.x
First, don’t use .hide
! Use .hidden
. As others have said, .hide
is deprecated,
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1
Second, use jQuery’s .toggleClass(), .addClass() and .removeClass()
<div id="myId" class="hidden">Foobar</div>
- To show it:
$("#myId").removeClass('hidden');
- To hide it:
$("#myId").addClass('hidden');
- To toggle it:
$("#myId").toggleClass('hidden');
Don’t use the CSS class .show
, it has a very small use case. The definitions of show
, hidden
and invisible
are in the docs.
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}