jQuery div content partial hide, show all

Question

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 the ID references to classes but I can n

Answer 1

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

Answer 2

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