Question

I’m working on a portfolio site for an iPhone developer. In this site the iPhone app icons will act as a toggle buttons for panels that describe the application. The panels animate over the main page content. To add to this, if a panel is open and another app icon is clicked the open panels will need to close and the next app will open. Currently the script I have works great for toggling a single panel, see here: http://cncpts.me/dev/

So how can change the current script so it accepts multiple ids or classes, without creating duplicate code?

Here is the jQuery that is driving the functionality for a single toggle action.

    $(document).ready(function() {
    $("li.panel_button").click(function(){
        $("div#panel").animate({
            height: "700px"
        })
        .animate({
            height: "600px"
        }, "slower");
        $("div.panel_button").toggle('zoom'); return false

    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "slower");   return false



   });  

});

Here is the HTML:

<div id="panel"> 
            <div id="panel_contents"></div>
                <img src="images/iphone.png" border="0" alt="iPhone Development">
                <div class="panel_button" id="hide_button" style="display: none;">  
                <a href="#"><img src="images/collapse.png" alt="collapse" /></a>  
                </div>
        </div>

Answer 1

give the list items a rel attribute that points to the div you are trying to show/hide.

<li rel='#panel_1' class='panel_button'> 

give all the div’s a common class such as ‘flyaway’, do a hide on any div with the same class that is not currently hidden

$('.flyaway').not(':hidden').animate({ height: "0px"}, "slower");  

and show the one you want

$("li.panel_button").click(function(){
        $($(this).attr('rel')).animate({
            height: "700px"
        })
        .animate({
            height: "600px"
        }, "slower");
        $($(this).attr('rel')+" div.panel_button").toggle('zoom'); return false

    });