Question

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…

Answer 1

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;.