jQuery show() won't turn Bootstrap d-none class visible

Question

I'm 99% sure I'm missing something terribly obvious here. On the next example, clicking the button should make the div with the .progress class visible. however, it is not working.

function func() {
  $('.progress').show();
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="progress d-none">
  No longer hidden!
</div>

<button onclick="func()">
  click me
</button>

Shidersz · Accepted Answer · 2020-01-21T20:00:02.620

The issue here is that the d-none utility class from Bootstrap 4 adds the next CSS style to the .progress element:

.d-none {
  display: none!important;
}

On the other hand, when you invoke the show() method from jQuery, it adds the display: block style to the mentioned element. However, the previous style still has priority over this one, and the element remains hidden. This is due to the !important clause, for details you can give a read to the next link:

What are the implications of using "!important" in CSS?

So, the alternative (or good practice) is to remove the d-none class from the item you want to show.

function func()
{
    $('.progress').removeClass("d-none");
}

Example:

On the next example, the d-none class is toggled in order to change the visibility of the .progress element:

function func()
{
    $('.progress').toggleClass("d-none");
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <h2 class="progress mt-2 d-none bg-warning">
    No longer hidden!
  </h2>

  <button onclick="func()" class="btn btn-primary">
    click me
  </button>
</div>

score 4 · Answer 2 · answered Oct 11 '18 at 02:54

4

jquery's show is not compatible with bootstrap's d-none. You can use Collapse - https://getbootstrap.com/docs/4.1/components/collapse/ - instead

answered Oct 11 '18 at 02:54

jsnfwlr

3,638
2
23
25

Alas, the `d-none` class is still stronger. – Gleb Kemarsky Oct 22 '20 at 06:40
1

@Gleb if you use .collapse instead of .d-none, you can use bootstrap's collapse function instead of jQuery's show function. Read the details in the link that's been in my answer for more than 2 years, it tells you how to solve the problem. – jsnfwlr Oct 23 '20 at 08:08
I search for a possiibility to open the block with the `.d-none` class by any method from jQuery or Bootstrap. My comment is just a resume that the `.d-none` class is stronger as the `.collapse()` method: https://codepen.io/glebkema/pen/YzWNXjV – Gleb Kemarsky Oct 23 '20 at 08:56

score 4 · Answer 3 · answered May 09 '20 at 05:22

4

When you not sure how your element hidden, with Bootstrap's d-none, or with regular display: none, but you need to make it visible in any case, just use following code:

$(el).removeClass("d-none").show();

answered May 09 '20 at 05:22

Aleksey Kuznetsov

623
6
10

score 0 · Answer 4 · answered Jun 22 '22 at 16:23

You can create your own function like below.

$.fn.bsShow = function(){
    $(this).removeClass('d-none');
}

$.fn.bsHide = function(){
    $(this).addClass('d-none');
}

and then you can use like normal jQuery show/hide function.

$(".progress").bsShow();
$(".progress").bsHide();

jQuery show() won't turn Bootstrap d-none class visible

4 Answers4

Example:

Linked