CODEWITHSUNDEEP
jqueryhidetoggleshow
Stuart Robson
Stuart Robson

Reputation: 1149

jquery toggle showing and hiding different elements... confusing

I've got a toggle set on an element that I want to show hide 4 elements (3 ids, 1 class).

Here's my jquery

$('#tap-menu').click(function() {
    $('#left-column, #settings, #ortibi, .userprofile').toggle();
});

These 4 elements are hidden on page load and on the first toggle, show all of them. If I toggle to hide again, that's fine. But if I toggle to show them again. The .userprofile doesn't show. Is this because it's a class rather than an id in the CSS?

Why would that effect it?

Thanks in advance...

Upvotes: 0

Views: 614

Answers (1)

Mark
Mark

Reputation: 861

Instead of using display: none; on the .userprofile css, hide the elements with jquery like this:

$(function(){
    $('#left-column, #settings, #ortibi, .userprofile').hide();
});

See this for more information: http://api.jquery.com/hide/

Specifically:

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Conversely, if it initially has a value of display: none; toggling it back on will give it the same value of display: none;.

Upvotes: 1

Related Questions