Question 10699 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

toggleClass doesn't work with display:block – Jquery

I have 4 divs which have style="display: none" property and when I try to change the property to display: block through toggleClass it doesn’t works.
JS:

$(document).ready(function () {
    $("#add_client").click(function () {
        $("#inputs").toggleClass("shown");
    });

    $("#show_clients").click(function () {
        $("#show_information").toggleClass("shown");
    });

    $("#show_free_rooms").click(function () {
        $("#show-free-rooms").toggleClass("shown");
    });

    $("#search-by").click(function () {
        $("#find_room_by_name").toggleClass("shown");
    });
});

CSS:

.shown{
    display: block;
}

Can anyone explain me what is wrong with my code?

Tags:

2

Answers


  1. 0

    The issue with your sample is that the display declaration in CSS is not overwriting the attribute set via inline style, because the latest has higher priority. You can define the display: none state in CSS too, with a similar level of specificity.

    See below a running sample, notice I deliberately made the second item fail by declaring the attribute style in the HTML property as you did initially, so the difference with the rest of the elements can be noticed:

    $(document).ready(function () {
  $("#add_client").click(function () {
    $("#inputs").toggleClass("shown");
  });

  $("#show_clients").click(function () {
    $("#show_information").toggleClass("shown");
  });

  $("#show_free_rooms").click(function () {
    $("#show-free-rooms").toggleClass("shown");
  });

  $("#search-by").click(function () {
    $("#find_room_by_name").toggleClass("shown");
  });
});
    .myitems div {
  display: none;
}

.myitems div.shown {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add_client">add client</button> |
<button id="show_clients">show client (not working)</button> |
<button id="show_free_rooms">show_free_rooms</button> |
<button id="search-by">search-by</button>

<div class="myitems">
<div id="inputs">
  inputs div content
</div>

<div id="show_information" style="display: none">
  show_information div content (not working)
</div>

<div id="show-free-rooms">
  show-free-rooms div content
</div>

<div id="find_room_by_name">
  find_room_by_name div content
</div>
</div>
    Login or Signup to reply.
  2. 0

    Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any normal styles in author stylesheets, and therefore, can be thought of as having the highest specificity.

    A possible solution to your problem would be to remove the inline style, and instead a class, say hidden to those elements. And in your stylesheet,

    .hidden {
    display: none;
}

.shown{
    display: block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search