Jquery to Show/Hide Multiple Divs (by ID) with Icon Toggle
<p>I'm trying to get some jQuery to work and I know (well, think) that I'm close to the solution based on the information I found in <a href="http://stackoverflow.com/questions/14186565/jquery-hide-and-show-toggle-div-with-plus-and-minus-icon">this question</a>.</p>

<p>Essentially what I want is to have multiple plus/minus icons on a page that when clicked toggle the icon and show a specific DIV based on an ID value.</p>

<p>Looking at this example below, the content in the DIV would be hidden until the icon was clicked. Once clicked the plus icon changes to a minus icon. If the minus icon were clicked, the content would be hidden again. Multiple DIV's should be allowed to be shown at the same time, so it's almost like each toggle should be independent.</p>

<p>[... if there could be a 'show/hide all' link that would be awesome!]</p>

<pre><code>&lt;div&gt;&lt;a href="#" id="content1"&gt;[Plus Icon]&lt;/a&gt; Content Title&lt;/div&gt;
&lt;div id="content1"&gt;This is some content. Really exciting content!&lt;/div&gt;

&lt;div&gt;&lt;a href="#" id="content2"&gt;[Plus Icon]&lt;/a&gt; Different Content&lt;/div&gt;
&lt;div id="content2"&gt;Here is more content. This content is less exciting.&lt;/div&gt;
</code></pre>

<p>Note: In my above example, the div that display are right below the link, but that is not always the case. Sometimes the toggle link is in a different spot.</p>

<p>As you can see, I want to be able to specify an ID in the toggle link that corrosponds to the DIV to be displayed hidden.</p>

<p>And, if the showing/hiding could be animated with a  sliding effect, that would be good.</p>

<p>The two scripts I have from the other question I found do almost what I want, except they only relate to one DIV and don't have the ID type system I'm describing.</p>

<p>Script Credit to: Vytautas Butkus</p>

<p><a href="http://jsfiddle.net/z7F75/1/" rel="nofollow">Fiddle</a></p>

<pre><code>$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

&lt;a href="#" class="show_hide"&gt;Show&lt;/a&gt;

&lt;div class="slidingDiv" style="display: block;"&gt;
Check out
&lt;/div&gt;
</code></pre>

<p>Script Credit to: roXon</p>

<p><a href="http://jsfiddle.net/BLkpG/7/" rel="nofollow">Fiddle</a></p>

<p>Note: His script toggles the text as well, which I don't really want.</p>

<pre><code>$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

&lt;a href="#" class="show_hide"&gt;Show&lt;/a&gt;

&lt;div class="slidingDiv" style="display: block;"&gt;
Check out
&lt;/div&gt;
</code></pre>

<p>Many thanks in advance for your help! As always, it is greatly appreciated!</p>
