jQuery div content partial hide, show all

I have this solution I am trying to use but it uses ID's. I want multiple divs on the same page using the same classes. I changed开发者_StackOverflow 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 independently. 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.

Any suggestions are very helpful. Thanks.

$(function(){

var slideHeight = 75; // px
var defHeight = $('.wrap').height();
    if(defHeight >= slideHeight){
        $('.wrap').css('height' , slideHeight + 'px');
        $('.read-more').append('<a href="#">Click to Read More</a>');
        $('.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

});

my HTML

<div class="container">

<h1>jQuery slide with minimum height</h1>

<h2>About Billabong</h2>

<div class="wrap">

    <div>

        <p>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.</p>

        <p>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.</p>

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

        <p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>

    </div>

    <div class="gradient"></div>

</div>

<div class="read-more"></div>

<div class="container">

<h1>jQuery slide with minimum height Content 2</h1>

<h2>About Billabong</h2>

<div class="wrap">

    <div>

        <p>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.</p>

        <p>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.</p>

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

        <p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>

    </div>

    <div class="gradient"></div>

</div>
<div class="read-more"></div>

</div>

use all classes and replace your code with this. I hope it is self explanatory why it works.

var slideHeight = 75;
$(".container").each(function() {
    var $this = $(this);
    var $wrap = $this.children(".wrap");
    var defHeight = $wrap.height();
    if (defHeight >= slideHeight) {
        var $readMore = $this.find(".read-more");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<a href='#'>Click to Read More</a>");
        $readMore.children("a").bind("click", function(event) {
            var curHeight = $wrap.height();
            if (curHeight == slideHeight) {
                $wrap.animate({
                    height: defHeight
                }, "normal");
                $(this).text("Close");
                $wrap.children(".gradient").fadeOut();
            } else {
                $wrap.animate({
                    height: slideHeight
                }, "normal");
                $(this).text("Click to Read More");
                $wrap.children(".gradient").fadeIn();
            }
            return false;
        });
    }
});

Or see a live demo here

You can use ":first" selector, then remove the class from that object, then call again. Or if you don't want to remove a class, add a class and use the ":first" and ":not" selectors