title: jQuery multiple slide up down divs
body: <p>I found a tutorial on making the following slide down panel.  <a href="http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html" rel="nofollow">http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html</a> I'd like to have multiple slide down menus across the top of the screen</p>
  
  <p>I tried creating an new  and tried setting it to display:inline, but that didn't work.  The buttons are appearing on top of each other.  How can I get them side by side?  Ideally I would like the slide downs to appear side by side and be able to click on each separately.</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Simple Slide Panel&lt;/title&gt;
  
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      $(".btn-slide").click(function(){
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active"); return false;
      });
  
  
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  body {
      margin: 0 auto;
      padding: 0;
      width: 200px;
      font: 75%/120% Arial, Helvetica, sans-serif;
  }
  a:focus {
      outline: none;
  }
  #panel {
      background: #754c24;
      height: 500px;
      display: none;
  }
  
  #about {
      background: #754c24;
      height: 500px;
      display: none;
  }
  
  .slide {
      margin: 0px 20%;
      padding: 0;
      border-top: solid 4px #422410;
      background: orange;
  }
  .btn-slide {
      background: url(images/white-arrow.gif) no-repeat right -50px;
      text-align: center;
      width: 100%;
      height: 31px;
      padding: 10px 10px 0 0;
  
      display: block;
      font: bold 120%/100% Arial, Helvetica, sans-serif;
      color: #fff;
      text-decoration: none;
  }
  .active {
      background-position: right 12px;
  }
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="panel"&gt;
      hi
  &lt;/div&gt;
  
  &lt;p class="slide"&gt;&lt;a href="#" class="btn-slide"&gt;Button 1&lt;/a&gt;&lt;/p&gt;
  
  &lt;div id="about"&gt;
      hi
  &lt;/div&gt;
  
  &lt;p class="slide"&gt;&lt;a href="#" class="btn-slide"&gt;Button 2&lt;/a&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>