jQuery show won t turn Bootstrap d-none class visible

0 votes

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>
Jun 23, 2022 in Web Development by gaurav
• 23,260 points
2,631 views

1 answer to this question.

0 votes

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 Jun 27, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

How to show message in model body if bootstrap model have no data in jquery

I'm trying to display a text message ...READ MORE

Jul 29, 2022 in Web Development by gaurav
• 23,260 points
763 views
0 votes
0 answers

JavaScript style.display="none" or jQuery .hide() is more efficient?

document.getElementById("elementId").style.display="none" is used in JavaScript to hide an ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
3,743 views
0 votes
0 answers

I cant hide divs which has spesific class with Jquery

I changed my code to below code ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
297 views
0 votes
0 answers

jQuery exclude elements with certain class in selector

I want to setup a click event ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
1,332 views
0 votes
0 answers

Bootstrap : TypeError: $(...).modal is not a function

When I call  bootstrap modal from jquery ...READ MORE

May 1, 2022 in Other DevOps Questions by Kichu
• 19,040 points
2,954 views
0 votes
1 answer

Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

Try this Change the order of files it ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
640 views
0 votes
1 answer

Which is faster: Using bootstrap CDN or downloaded

CDNs deliver faster loading speeds for readers. Files ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,680 points
1,798 views
0 votes
0 answers

Expand form based on radio selection in jQuery & Bootstrap

I am trying to show a part ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
607 views
0 votes
1 answer

Not able to show/hide div which is nearest to checkbox using JQuery

pretty simple: $('.check-hide-show-content').hide(); // hide all content divs // ...READ MORE

answered Aug 2, 2022 in Web Development by rajatha
• 7,680 points
1,459 views
0 votes
1 answer

JQuery Difference between hide() and fadeOut() , show() and fadeIn()

Main difference between FadeIn, FadeOut vs hide, ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,680 points
2,694 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP