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>

Answer 1

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>

Answer 2

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