jQuery div content partial hide, show all
<p>I have <a href="http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/" rel="nofollow">this solution</a> I am trying to use but it uses ID's.  I want multiple divs on the same page using the same classes.  I changed the ID references to classes but I can not get them to fire independently of each other. They all fire at the same time. How would I get them to fire <strong>independently</strong>. I thought by wrapping the function in a .each() that would fix it but it seems to still be firing all my divs to open at the same time.</p>

<p>Any suggestions are very helpful. Thanks.</p>

<pre><code>$(function(){

var slideHeight = 75; // px
var defHeight = $('.wrap').height();
    if(defHeight &gt;= slideHeight){
        $('.wrap').css('height' , slideHeight + 'px');
        $('.read-more').append('&lt;a href="#"&gt;Click to Read More&lt;/a&gt;');
        $('.read-more a').click(function(){
            var curHeight = $('.wrap').height();
            if(curHeight == slideHeight){
                $('.wrap').animate({
                  height: defHeight
                }, "normal");
                $('.read-more a').html('Close');
                $('.gradient').fadeOut();
            }else{
                $('.wrap').animate({
                  height: slideHeight
                }, "normal");
                $('.read-more a').html('Click to Read More');
                $('.gradient').fadeIn();
            }
            return false;
        });
    }// end if
</code></pre>

<p>});</p>

<p>my HTML</p>

<p><code>&lt;div class="container"&gt;</code></p>

<p><code>&lt;h1&gt;jQuery slide with minimum height&lt;/h1&gt;</code></p>

<pre><code>&lt;h2&gt;About Billabong&lt;/h2&gt;

&lt;div class="wrap"&gt;

    &lt;div&gt;

        &lt;p&gt;Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.&lt;/p&gt;

        &lt;p&gt;Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.&lt;/p&gt;

        &lt;p&gt;Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.&lt;/p&gt;

        &lt;p&gt;Information courtesy of &lt;a title="Billabong" href="http://www.billabong.com/us/"&gt;Billabong&lt;/a&gt;.&lt;/p&gt;

    &lt;/div&gt;

    &lt;div class="gradient"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class="read-more"&gt;&lt;/div&gt;
</code></pre>

<p></p>

<p><code>&lt;div class="container"&gt;</code></p>

<pre><code>&lt;h1&gt;jQuery slide with minimum height Content 2&lt;/h1&gt;

&lt;h2&gt;About Billabong&lt;/h2&gt;

&lt;div class="wrap"&gt;

    &lt;div&gt;

        &lt;p&gt;Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.&lt;/p&gt;

        &lt;p&gt;Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.&lt;/p&gt;

        &lt;p&gt;Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.&lt;/p&gt;

        &lt;p&gt;Information courtesy of &lt;a title="Billabong" href="http://www.billabong.com/us/"&gt;Billabong&lt;/a&gt;.&lt;/p&gt;

    &lt;/div&gt;

    &lt;div class="gradient"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;div class="read-more"&gt;&lt;/div&gt;
</code></pre>

<p><code>&lt;/div&gt;</code></p>
