title: Jquery: Show Div (animated) on Click, Only Close When Different Link Clicked + Only One DIV at a Time
body: <p>[Apologies for the initial way I posted this question!]</p>
  
  <p>I am creating a portfolio type website and I need an effect similar to the one seen here when you click on any item in the "Recent Work" section: <a href="http://themes.zenthemes.net/cleanr/" rel="nofollow">http://themes.zenthemes.net/cleanr/</a></p>
  
  <p>Essentially this is the functionality I'm trying to achieve:</p>
  
  <ol>
  <li>Click a link on an item (multiple items will have a link to different content)</li>
  <li>On click, a div will animate and open with new content (in a pre-defined location)</li>
  <li>The div that opens will have a close button. If the close button is clicked, the DIV will animate and close.</li>
  <li>Only ONE of these divs with new content can be displayed at a time. So, if a second link is clicked, the first div should close quickly and the second div should open.</li>
  </ol>
  
  <p>I'm pretty close to a solution with the code below, but am running into one major glitch...</p>
  
  <p>If you open DIV 1 and then open DIV 2, it knows to collapse/hide DIV 1, which is perfect (so only one div is shown at a time).</p>
  
  <p>However, if you open DIV 1 and then click the close (red X) button in DIV 1, it begins to close, but as soon as it closes it re-opend again. I just want it to close and stay closed (until a link is clicked again).</p>
  
  <p>I've tried a few things, but can't get it to play nicely.</p>
  
  <p><strong>You can see this in action here:</strong> <a href="http://jsfiddle.net/tdHTN/1/" rel="nofollow">http://jsfiddle.net/tdHTN/1/</a></p>
  
  <p>(Try clicking the first 'go' button, then clicking the red 'x' that appears to see the problem.)</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#slidingDiv, #slidingDiv_2{
  height:200px;
  background-color: #99CCFF;
  padding:20px;
  margin-top:10px;
  border-bottom:5px solid #3399FF;
  display:none;}
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="slidingDiv" class="toggleDiv" style="clear:both;"&gt;
      This is my content for block ONE (1). Isn't it so super interesting?
      &lt;a href="#" class="show_hide" rel="#slidingDiv"&gt;&lt;img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="slidingDiv_2" class="toggleDiv" style="clear:both;"&gt;
      This is some super exciting content that I will fill in later. This is block TWO (2)
      &lt;a href="#" class="show_hide" rel="#slidingDiv_2"&gt;&lt;img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p> </p>
  
  <pre><code>&lt;a href="#" class="show_hide" rel="#slidingDiv"&gt;&lt;img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /&gt;&lt;/a&gt;
  &lt;a href="#" class="show_hide" rel="#slidingDiv_2"&gt;&lt;img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>(function ($) {
  $.fn.showHide = function (options) {
  
      //default vars for the plugin
      var defaults = {
          speed: 1000,
          easing: '',
          changeText: 0,
          showText: 'Show',
          hideText: 'Hide'
  
      };
      var options = $.extend(defaults, options);
  
      $(this).click(function () { 
  
           $('.toggleDiv').slideUp(options.speed, options.easing);    
           // this var stores which button you've clicked
           var toggleClick = $(this);
           // this reads the rel attribute of the button to determine which div id to toggle
           var toggleDiv = $(this).attr('rel');
           // here we toggle show/hide the correct div at the right speed and using which easing effect
           $(toggleDiv).slideToggle(options.speed, options.easing, function() {
           // this only fires once the animation is completed
           if(options.changeText==1){
           $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
           }
  });
  
        return false;
  
  });
  
  };
  })(jQuery);
  
  
  $(document).ready(function(){
  
  $('.show_hide').showHide({           
      speed: 1000,  // speed you want the toggle to happen    
      easing: ''
  }); 
  
  
  });
  </code></pre>
  
  <p>One other thing I'm trying to accomplish (if possible) is to have the DIV animation slide up instead of slide down. I tried changing "slideUp" to "slideDown", but that didn't work.</p>
  
  <p>Many thanks in advance for your help!</p>
  
  <p>[Note: Script source: http://papermashup.com/jquery-show-hide-plugin/]</p>