Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 278
Daniel Williams Avatar asked Oct 11 '18 02:10

Daniel Williams


2 Answers

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>
like image 120
Shidersz Avatar answered Sep 18 '22 12:09

Shidersz


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

like image 27
jsnfwlr Avatar answered Sep 18 '22 12:09

jsnfwlr