CODEWITHSUNDEEP
jquery
Olivier Pons
Olivier Pons

Reputation: 15796

jQuery: hidden elements are considered "visible", why?

I've made a working example of what I want:

http://jsfiddle.net/uRhuK/

Try to click on one line:

Then try to click on another line: it works great: it hide the previous and shows the new one.

Now try to re-click on the first line: nothing happens! Why?

Because that code is ok = the element is considered visible:

if ($(id).is(':visible')) {
    return;
}

This would mean that after one slideUp() the element is considered visible.

Any idea how comes?

[edit]

I've changed my code so now it work here: http://jsfiddle.net/uRhuK/2/ but I don't know if it's clean jQuery code or not.

Upvotes: 0

Views: 195

Answers (4)

charlietfl
charlietfl

Reputation: 171690

Revised answer..... problem is due to hiding of sub UL LI's 

 $('.heuresdetail').hide();/* hide sub li*/

These are staying hidden at times even when parent UL is display:block

Upvotes: 0

kand
kand

Reputation: 2338

Showing/hiding with jQuery or jQueryUI will pretty much always modify the display property (display:none, display:block, etc). Visible is a different property entirely, and is used to hide an element but keep its area occupied.

So to check if something is hidden, or if you are going to hide something yourself, you should almost always check the display css property and not visible.

Upvotes: 0

1b0t
1b0t

Reputation: 432

check for display:none instead of visible

Upvotes: 0

Brandt Solovij
Brandt Solovij

Reputation: 2134

"visibility" is a property separate from the "slideup" which manipulates height of the element. Something can be 0px but still "visible"

looking at your code, you are not actually ever resetting the visibility : 

$('.heuresresume').hide();
$('.heuresdetail').hide();
$('ul.jour > li').unbind('click').click(function(event) {
    event.preventDefault();
    var id = '#heuresresume' + parseInt(this.id.substr(4));
    console.log('-------------------');
    console.log(id);
    console.log($(id));
    console.log('visible :' + $(id).is(':visible')); 
    console.log('hidden :' + $(id).is(':hidden'));
    if ($(id).is(':visible')) {
        console.log('visible');
        return;
    }
    $('.heuresresume :not(' + id + ')').slideUp('slow');
    $(id).slideDown('slow');
});​

You don't ever set anything to not be visible. SlideUP does not modify this property in my experience, only element dimensions.

edit: to simplify things, why not assign a class to the element to designate if it is expanded or contracted? That would be the best, least intrusive approach - piggy back it to the "slideup/down" directives imho

Upvotes: 1

Related Questions