title: Animated DropDown Div Panel with Javascript
body: <p>Thanks in advance for any possible help.</p>
  
  <p>Basically I was looking to create drop down div panels that are activated by a function <code>toggleSlider</code>, where the panels are hidden when the page is initially loaded. The first two links "resume" and "work" function like I had hoped, where you click on one and the corresponding div drops in, and when you click on the same link again or one of the other links the content is retracted. The third link is not working like the others, when you click on it the corresponding div drops in covering the other contents, and can only be retracted on by clicking on the same link again. Here's what it looks like....</p>
  
  <p><a href="http://www.visuallypersuasive.com/jason/test.html#" rel="nofollow">http://www.visuallypersuasive.com/jason/test.html#</a></p>
  
  <p>And here is the javascript</p>
  
  <pre><code>function toggleSlider() {
  if ($("#panelThatSlides").is(":visible")) {
      $("#contentThatFades").fadeOut(600, function(){
          $("#panelThatSlides").slideUp();
      });
  }
  if ($("#panelThatSlides2").is(":visible")) {
      $("#contentThatFades2").fadeOut(600, function(){
          $("#panelThatSlides2").slideUp();
      });
  }
  else {
      $("#panelThatSlides").slideDown(600, function(){
          $("#contentThatFades").fadeIn();
      });
  }   
  }
  
  function toggleSlider2() {
  if ($("#panelThatSlides2").is(":visible")) {
      $("#contentThatFades2").fadeOut(600, function(){
          $("#panelThatSlides2").slideUp();
      });
  }
  if ($("#panelThatSlides").is(":visible")) {
      $("#contentThatFades").fadeOut(600, function(){
          $("#panelThatSlides").slideUp();
      });
  }
  
  else {
      $("#panelThatSlides2").slideDown(600, function(){
          $("#contentThatFades2").fadeIn();
      });
  }   
  }
  
  function toggleSlider3() {
  if ($("#panelThatSlides3").is(":visible")) {
      $("#contentThatFades3").fadeOut(600, function(){
          $("#panelThatSlides3").slideUp();
      });
  }
  if ($("#panelThatSlides2").is(":visible")) {
      $("#contentThatFades2").fadeOut(600, function(){
          $("#panelThatSlides2").slideUp();
      });
  }
  if ($("#panelThatSlides").is(":visible")) {
      $("#contentThatFades").fadeOut(600, function(){
          $("#panelThatSlides").slideUp();
      });
  }
  
  
  else {
      $("#panelThatSlides3").slideDown(600, function(){
          $("#contentThatFades3").fadeIn();
      });
  }   
  
  
  }
  </code></pre>
  
  <p>And here is the html</p>
  
  <pre><code>&lt;div id="resume"&gt;&lt;a class="nav" href="#" onclick="toggleSlider();"&gt;resume&lt;/a&gt;
  &lt;div id="panelThatSlides" style="position:relative; left:250px; display:none;   
  background:#eee; width:950px; height:500px;"&gt;
  &lt;div id="contentThatFades" style="position:relative; left:00px; display:none; 
  background:#fff; width:950px; height:500px;"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="work"&gt;&lt;a class="nav" href="#" onclick="toggleSlider2();"&gt;work&lt;/a&gt;
  &lt;div id="panelThatSlides2" style="position:relative; left:-420px; display:none; 
  background:#eee; width:950px; height:500px;"&gt;
  &lt;div id="contentThatFades2" style="position:relative; left:00px; display:none; 
  background:#fff; width:950px; height:500px;"&gt;mucho content&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="contact"&gt;&lt;a class="nav" href="#" onclick="toggleSlider3();"&gt;contact&lt;/a&gt;
  &lt;div id="panelThatSlides3" style="position:relative;left:-550px; display:none;    
  background:#eee; width:950px; height:500px;"&gt;
  &lt;div id="contentThatFades3" style="position:relative; left:00px; display:none; 
  background:#fff; width:950px; height:500px;"&gt;mucho mass content&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While I feel I have a solid basic to intermediate understanding html and css, javascript is pretty much Greek to me. Ideally I would like use this technique to nest another drop down div within the work link/div with more than three links if I could get this to work. </p>
  
  <p>Thanks again to anyone who can help.</p>