title: toggle div along side one another with css and jQuery
body: <p>I want to toggle a div along side another when an image has been clicked. As it toggles open it should push the div next to it to the left. When toggled closed the div along side it moves back to its position...What it does now is toggle on top of the div next to it. This is my code.</p>
  
  <pre><code>   img{
     margin-left:0px;
    }
  
    #info {
      position: absolute;
      margin-left: 20px;
      margin-top: -310px;
      border: 1px solid black;
      width: 400px;
      height: 308px;
      background-color: #F4F4EE;
     }
  
     #container {
        border: 1px solid black;
        position: relative;
      }
  </code></pre>
  
  <p>The jQuery...</p>
  
  <pre><code>     $(document).ready( function(){
    hideInfo();
       });
  
      function hideInfo(){
         $( '#container &gt; div' ).hide();
  
        $('#container a').click(function(){
        $(this).next().animate({
                 width: "toggle",
                 height: "toggle"}, 
             {duration: 700, 
              specialEasing: {width: "linear"},
           });
         });
      }
  </code></pre>
  
  <p>The Html</p>
  
  <pre><code>        &lt;body&gt;
          &lt;div id="container"&gt;
     &lt;a href="#"&gt;&lt;img src="button.jpg"/&gt;&lt;/a&gt; /*image must be clicked to toggle the div */
    &lt;div id="info" class="panel"&gt;
          Information in div 1
     &lt;/div&gt;
             &lt;a href="#"&gt;&lt;img src="button2.jpg"/&gt;&lt;/a               
              &lt;div id="info"  class="panel"&gt;
                   information in the second div
           &lt;/div&gt;
       &lt;div&gt;
     &lt;/body&gt;
  </code></pre>