How can I hide an element using Twitter Bootstrap and show it using jQuery?

Bootstrap and jQuery: Mastering visibility

Working in harmony, Bootstrap and jQuery offer a suite of tools to control element visibility. Bootstrap utilises .d-none and .hidden classes in its 4.x and 3.x versions respectively for making elements disappear. The .invisible class renders items transparent but space-occupying, as if your elements were ghosting you.

In turn, jQuery comes in with its class manipulating methods to hide and reveal these elusive components:

$('#element').removeClass('d-none'); // Boo! Here it is in Bootstrap 4.x
$('#element').addClass('d-none'); // Poof! It's gone in Bootstrap 4.x


More ways to manage visiblity

Working with CSS specificity

While using jQuery to alter styles, don't forget the CSS specificity:

$('#my-div').css('display', ''); // Basically, CSS's version of the "Undo" button 


This mitigates the usage of !important thus preventing any heartbreaking specificity wars in your CSS.

Bootstrap: The collapsing method

Looking for a dramatic reveal with a transition effect? Bootstrap's got your back with the .collapse plugin:

$('#myCollapsible').collapse('toggle'); // Tada! Your content makes a fancy entrance


Direct visibility management via jQuery

Direct usage of jQuery's .show() and .hide() methods can control visibility, but might redefine the term "respect" when it comes to Bootstrap's styling rules:

$('#myElement').hide(); // jQuery's version of "Now you see me..."
$('#myElement').show(); // ...Now you don't!"


Custom hiding classes

Think about using a custom CSS class for a personalized hiding act. It can dodge potential overlapping with Bootstrap's styling:

.my-custom-hide {
  display: none;
}


$('#element').addClass('my-custom-hide'); // Your own invisibility cloak
$('#element').removeClass('my-custom-hide'); // Revealing magic trick


When in doubt, hit the docs

The Bootstrap and jQuery documentation are your holy grail when it comes to updates and best practices. Embrace the habit of referring to them to ensure your code is both efficient and up-to-trend.