Hiding and showing panels with jQuery

I just finished this website (a professional portfolio) where I had to hide and show content panels in an alternate way. The main problem I've encountered is basically to determine whether a panel is visible or not, that is, if its current state has been yet modified by a jQuery action.

When a visitor clicks on a tab, the corresponding panel must be revealed. Of course when this action takes place, all other visible panels must be hidden (and so on). Here's how this is done:

this.hideShowPanels = function() {
        var ids = [];
       $('#navigation a').each(function() {
           var $a = $(this);
    var id = $a.attr('href');
    $a.click(function() {
        for(var i=0; i<ids.length; i++) {
           if(id !== ids[i]) {
        if($(ids[i]).is(':visible')) {
      return false;

First, I get the ID attribute of each panel by reading the value of the href attribute of each tab. Then I add this value to the ids array, which will be used later. When a user clicks on a tab, the corresponding hidden panel is showed thanks to the slideDown() method. In the meantime, I loop through the ids array and check whether there are other panels (not the current one) that are in a visible state. If so, I hide them through the slideUp() method. This action occurs on each tab, which has the form <a href="#panel"></a>.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.