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');
    $(id).hide();
    ids.push(id);
    
    $a.click(function() {
    
        $(id).slideDown(500);
        
        for(var i=0; i<ids.length; i++) {
        
           if(id !== ids[i]) {
    
        if($(ids[i]).is(':visible')) {
        
            $(ids[i]).slideUp(500);
        
        }
    
    }
        
        }
      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>.