CODEWITHSUNDEEP
jquerycss
Gaff
Gaff

Reputation: 5667

Div is not hiding via CSS after showing and hiding a div using jQuery

I have a little web app in which I show and hide DIVs a lot. Sometimes, however, I need to add a CSS class to that div that hides the div (using display:none rather than jQuery's hide() function) because I still need to know if the given div was initial shown on the screen. I typically use jQuery's addClass and removeClass accordingly.

However, I am running into a problem when doing this. It seems like if the div has been hidden and shown before, adding a display:none class to the div will not work.

I was wondering if there was any kind of work around that I could use without resorting to using hide().

Here are some JSFiddle examples to show you what I am talking about:

JSFiddle Example 1 - Will properly Hide the DIV using the CSS class.

JSFiddle Example 2 - After using the show() and hide() functions, it will not properly hide the DIV using the CSS class.

Upvotes: 0

Views: 4980

Answers (5)

SilverSnake
SilverSnake

Reputation: 572

The problem you encounter is that jQuery's hide()-function adds inline CSS to the element:

<div id="divTest" class="hideDiv" style="display: block;">

Where display is set to block, so your hideDiv class will get overwritten by the inline since it's considered "stricter" in CSS rules. A somewhat ugly workaround to this is to change your hideDiv CSS rule to this:

.hideDiv
{
    display: none !important;
}

The !important part will make it take precedence over the inline CSS.

Edit: Additionally, I would recommend sticking with one way to show/hide stuff (your own or jQuery). Use jQuery show/hide for all showing/hiding but you can still add a class for tracking, just don't have that class hide your elements.

So chance the button JavaScript to something like this:

$("#btnHideDiv").on("click", function()
{
    $("#divTest").addClass("hideDiv");
    $("#divTest").hide();
});

And completely remove the hiding CSS from the hideDiv class. Now you can still use jQuery to find the div(s) hidden after page-load without running into hiding/showing not working and without having to resort to !important.

A more elegant solution to your issue, I'd say.

Upvotes: 2

vdelricco
vdelricco

Reputation: 303

Try this:

http://jsfiddle.net/LgL4v/2/

It just sets the display property of the div to none using Javascript/jQuery instead of relying on CSS classes.

Upvotes: 1

Jarry
Jarry

Reputation: 1931

its because Jquery hide()/show() puts an inline display property to hide or show the div. so your class doesnt get applied. you can use .css('display','') to clean the div after using hide()/show()

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

I have done this also, a lot - my solution was to NOT use the .hide()/show at all, and simply create a "hidden" css class and toggle that or add/remove as you have done.

One advantage of doing this is you can query the .hasClass to see if it is hidden (by that class) if you need to know that current state, and if you want it initially hidden, you can simply add that class to the element markup.

Upvotes: 1

Santiago Rebella
Santiago Rebella

Reputation: 2449

Could you try instead;

 .hideDiv 
 {
    opacity:0;
}​

Upvotes: 0

Related Questions