title: Jquery collapsible region
body: <p>I am trying to make sections of page collapsible. No plan to use accordion, but simple hide/show to save screen space. See the sample code below. The first link has to click twice to make the section hide, and the second one works fine. Neglect this issue, if you can suggest a better way to do it.. In this example, div1 is in open position and div2 hidden initially.</p>
  
  <p>thanks,
  bsr.</p>
  
  <hr>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a class="toggle" href="#"&gt;Hide&lt;/a&gt;
  &lt;div class="toggle"&gt;
      &lt;p&gt;First div&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;a class="toggle" href="#"&gt;Show&lt;/a&gt;
  &lt;div class="toggle" style="display: none"&gt;
      &lt;p&gt;Second div&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  jQuery().ready(function() {
      $("a.toggle").toggle( 
          function() {
              $(this).text("Hide");
              $(this).next("div.toggle").show();
          },
          function() { 
              $(this).text("Show");
              $(this).next("div.toggle").hide();
          } 
      );  
  });  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>