title: jQuery Multiple Panel Toggle
body: <p>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: <a href="http://cncpts.me/dev/" rel="nofollow">http://cncpts.me/dev/</a></p>
  
  <p>So how can change the current script so it accepts multiple ids or classes, without creating duplicate code?</p>
  
  <p>Here is the jQuery that is driving the functionality for a single toggle action. </p>
  
  <pre><code>    $(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
  
  
  
     });  
  
  });
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="panel"&gt; 
              &lt;div id="panel_contents"&gt;&lt;/div&gt;
                  &lt;img src="images/iphone.png" border="0" alt="iPhone Development"&gt;
                  &lt;div class="panel_button" id="hide_button" style="display: none;"&gt;  
                  &lt;a href="#"&gt;&lt;img src="images/collapse.png" alt="collapse" /&gt;&lt;/a&gt;  
                  &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>