title: jquery effect - Slide hidden div down / Up, hiding currently showed hidden div
body: <p><em>*</em> Scenario</p>
  
  <p>i wish to make a jquery effect like the one found on this website, which is sitting to the right of the main flash add: </p>
  
  <p><a href="http://www.commbank.com.au/" rel="nofollow">http://www.commbank.com.au/</a></p>
  
  <p><em>*</em> Problem</p>
  
  <p>I have made a start, but have hit a little snag with muy method.. perhaps its not the best way to achieve my desired effect, please advise and thanks in advance!!</p>
  
  <p>My Code can be found here:</p>
  
  <p><a href="http://jsfiddle.net/gavAusWeb/HSbzC/1/" rel="nofollow">http://jsfiddle.net/gavAusWeb/HSbzC/1/</a></p>
  
  <p>Also i will display it below:</p>
  
  <p><em>*</em> HTML</p>
  
  <pre><code>&lt;div id="latestNewsJs"&gt;              
      &lt;div id="lnClickDivs1" class="sideJsBtns sidejsbtn1"&gt;&lt;/div&gt;
      &lt;div id="hiddenDiv1" class="secretDiv"&gt;&lt;/div&gt;
      &lt;div id="lnClickDivs2" class="sideJsBtns sidejsbtn2"&gt;&lt;/div&gt;
      &lt;div id="hiddenDiv2" class="secretDiv"&gt;&lt;/div&gt;        
      &lt;div id="lnClickDivs3" class="sideJsBtns sidejsbtn3"&gt;&lt;/div&gt;
      &lt;div id="hiddenDiv3" class="secretDiv"&gt;&lt;/div&gt;
      &lt;div id="lnClickDivs4" class="sideJsBtns sidejsbtn4"&gt;&lt;/div&gt;
      &lt;div id="hiddenDiv4" class="secretDiv"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>*</em> CSS</p>
  
  <pre><code>#latestNewsJs {
      border:1px solid red;
      width:106px;
      min-height:100%; 
  }
  #lnClickDivs1 {}
  #lnClickDivs2 {}
  #lnClickDivs3 {}
  #lnClickDivs4 {}
  
  .sideJsBtns {
      width:106px;
      height:30px;
      position:relative;
      float:left;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius:5px 5px 5px 5px;
      border:1px solid #CCCCCC;
  }
  
  #hiddenDiv1 {}
  #hiddenDiv2 {}
  #hiddenDiv3 {}
  #hiddenDiv4 {}
  
  .secretDiv {
      background:orange; 
      width:106px; 
      height:100px; 
      display:none; 
      margin-top:-7px;
      float:left;
  }
  </code></pre>
  
  <p><em>*</em> jquery</p>
  
  <pre><code>jQuery.noConflict();
  
  jQuery(document).ready(function(){         
  
      var curI = 0;
  
      jQuery('.sideJsBtns').click(function(){
  
          curI = jQuery(this).index() + 1;
  
          jQuery(".secretDiv").slideUp("medium");
  
          if (jQuery("#hiddenDiv" + curI).is(":hidden")) 
          {
              jQuery("#hiddenDiv" + curI).slideDown("medium");
          } else {
              jQuery("#hiddenDiv" + curI).slideUp("medium");
          }
  
      });
  
  });
  </code></pre>