CODEWITHSUNDEEP
jqueryhtmlcss
Miloš Zeković
Miloš Zeković

Reputation: 1

Simple jQuery show more/less content

I have this jQuery script, the script in every case shows the more/less button. I won't to hide a more/less button for content smaller than 80px. How to do that? Thank you

$(function(){

// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "Show more";
// The "less" link text
var lessText = "Close";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<a href="#" class="adjust"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
});
});

Upvotes: 0

Views: 764

Answers (1)

Betamos
Betamos

Reputation: 28787

You could wrap your code in a condition which checks the height before adding the adjust divs:

$(".more-less .more-block").each(function() {
    if ($(this).height() <= adjustHeight())
        return;
    // use $(this) as selector to do whatever you want to do
    // with the elements that are higher than your threshold
});

Upvotes: 2

Related Questions