title: jquery toggle() on DIV by hiding other div's
body: <p>I am using the following code to toggle the div by clicking on the block heading. I need to make the respective div appear on the click of respective block headings. Also those div should toggle by themselves.</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;style type="text/css"&gt;
      a { color:#C30; text-decoration:none; }
      #banner { width: 930px; background-color:#666; height: 500px; }
      #banner ul { list-style:none; padding: 40px; }
      #banner ul li { margin: 10px 0 0 0; }
      #banner ul li a { display:inline-block; border:5px solid #fff; background-color:#FC9; padding:10px; font: bold italic 18px Verdana; }
      .sliderContent { border:5px solid #fff; background-color:#FC9; padding:10px; min-height: 150px; display:none; margin-top:5px; }
      .sliderContent a { padding:0 !important; border:none !important; }
      .sliderContent a.closeButton { background:url(icon_modal_close.png) no-repeat 0 0; float:right; height:30px; width:30px; text-indent:-999px; }
  &lt;/style&gt;
  &lt;script type="text/javascript" language="javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('a.box').click(function(event){
              event.preventDefault();
              $(this).next('.sliderContent').toggle(function() {
                  $('.sliderContent').not(this).hide();
              });
          });
          $('.closeButton').click(function(){
              $(this).parent().hide();
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="banner"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#" class="box"&gt;Design&lt;/a&gt;
              &lt;div class="sliderContent"&gt;
                  &lt;a class="closeButton" href="#"&gt;Close&lt;/a&gt;
                  Lorem Ipsum Doner
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="box"&gt;Development&lt;/a&gt;
              &lt;div class="sliderContent"&gt;
                  &lt;a class="closeButton" href="#"&gt;Close&lt;/a&gt;
                  Lorem Ipsum Doner
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="box"&gt;Graphics&lt;/a&gt;
              &lt;div class="sliderContent"&gt;
                  &lt;a class="closeButton" href="#"&gt;Close&lt;/a&gt;
                  Lorem Ipsum Doner
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now the problem is with DIV hide() function. toggle function executes first then hide() function comes into picture. It makes my layout distorted as at a time two div are shown on the screen for a moment.</p>
  
  <p>It should be like div will hide first then current div will appear.</p>
  
  <p>Please help me on the same.</p>
  
  <p>Thanks
  Lokesh Yadav</p>