Question

I am getting text from an api xml document and outputting it. I need to limit the amount of text that shows up. But I am doing something wrong. I am limiting the height of the div to 200px and and hiding overflow, then by clicking a button I am showing the text. But when I go to hide it again, it does not work.

Here is the jsfiddle: http://jsfiddle.net/liveandream/zXDKK/

If there is anyway someone could also help me have it slide up and down and not cut the line of words in half, it would be GREATLY APPRECIATED! Thanks!

Answer 1

The .readLess doesn’t exist when you bind the event. Try below code,

See alternate solution below for better code.

DEMO

var div = $(".overview").height();
var content = $(".overview").html();
$(".overview").css("height", "200px");
$(".overview").css("overflow", "hidden");

$(document).on('click', ".readMore", function() {
    $(".overview").html(content);
    $(".overview").css("height", "auto");
    $("#read").removeClass("readMore");
    $("#read").addClass("readLess");
    $("#read").html("Read less");
});

$(document).on('click', ".readLess", function() {
    $(".overview").css("height", "200px");
    $(".overview").css("overflow", "hidden"); 
});

Alternatively, you can bind it to #read which will be much better.. see below,

DEMO

var $overview = $('.overview');
var $read = $('#read');

var div = $overview.height();
var content = $overview.html();
$overview.css({
    "height": "200px",
    "overflow": "hidden"
});

$read.on('click', function() {
    var $this = $(this);
    if ($this.hasClass('readLess')) {
        $overview.css({
            "height": "200px",
            "overflow": "hidden"
        });

       $read.removeClass("readLess").addClass("readMore").html("Read More");
    } else if ($this.hasClass('readMore')) {
        $overview.html(content);
        $overview.css("height", "auto");
        $read.removeClass("readMore").addClass("readLess").html("Read less");

    }
});