Imran Hossain Imran Hossain - 1 month ago 12
jQuery Question

Hide divs is not working in my browser but works fine in js_fiddle

I only wanted to hide Some div when the page is refreshed.
This works fine in Js_fiddle (js_fiddle_link),However when i try it in my browser,after hiding all the div it reappears again. what could be the reason ?
Snippet:



$(function() {
$("div.show").hide("2000")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>This is the testing for different div selection </h1>

<div class="list-group">

<li>Click here for A</li>
<li>Click here for B</li>
<li>Click here for C</li>

</div>

<div class="show">

This class holds the information aboout the A classs so those who want to join me within this group blah blah blah
</div>
<hr>
<div class="show">
This class holds the information aboout the B classs so those who want to join me within this group blah blah blah
</div>
<hr>
<div class="show">
This class holds the information aboout the C classs so those who want to join me within this group blah blah blah
</div>
<hr>




Answer Source

Check for conflicts with the .show class. As per comments the cause was Bootstrap 3's .show helper class with a display: block !important; rule overriding the inline styles added by the script.

Changing the .show class to another name fixed it.