CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark
Mark

Reputation: 77

Show more/less with effect

I found this code: link

$(".show-more a").on("click", function() {
var $this = $(this); 
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();    

if(linkText === "SHOW MORE"){
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
} else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
};

$this.text(linkText);
});​

CSS:

    div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

​

It was exactly what I was looking for, but as you can see here, if you modify it (link), the "Show more" link is there if you have only one or two lines, and it is not needed in that case. Thank you for your answers!

Upvotes: 4

Views: 14030

Answers (4)

JP_
JP_

Reputation: 1666

    if( $('.text-container').html().indexOf("<br") >= 0 ) {
        $(".show-more").hide()
    }

Upvotes: 1

Nope
Nope

Reputation: 22339

As your sample code was not fully working I decided to enhance one of my own samples I created in a post a while ago.

DEMO - Show more/less and hide the link when not needed

The demo shows the first text to have no link and the second to have a link. If you add a few more characters to the first text you see the link appear when you run the fiddle again.

The idea is to double check the client vs the actual height and determine then if you want to show the link. Similar to the below.

$(".show-more a").each(function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");

    console.log($link);

    var visibleHeight = $content[0].clientHeight;
    var actualHide = $content[0].scrollHeight - 1; // -1 is needed in this example or you get a 1-line offset.

    console.log(actualHide);
    console.log(visibleHeight);

    if (actualHide > visibleHeight) {
        $link.show();
    } else {
        $link.hide();
    }
});

The demo is using the following HTML:

<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
    </div>
<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>​

and the following basic CSS:

div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.text-content{
    line-height: 1em;
}

.short-text {
    overflow: hidden;
    height: 2em;
}

.full-text{
    height: auto;
}

h1 {
    font-size: 24px;        
}

.show-more {
    padding: 10px 0;
    text-align: center;
}

​

Upvotes: 6

timaschew
timaschew

Reputation: 16602

I don't know whats your real question is, but I suppose you want to deactive the show more link, if the text is only 1 or 2 lines and active it if the text has more than 2 lines.

For this purpose you have to check if the div with the text is bigger than you threshold (2 lines). In my solution I use the height() function which give you the height in pixel. In the original example the link text is not visible if the height is more than 2em. You better should use also pixel for that or use a tool to convert the units.

Here are my addition lines for a solution with a threshold of 1 line:

var text = $('.text-container');
if (text.height() <= 20) {
    $('.show-more').hide();
}

http://jsfiddle.net/JRDzf/

Upvotes: 1

Tariqulazam
Tariqulazam

Reputation: 4585

See the working fiddle here - http://jsfiddle.net/tariqulazam/hpeyH/

First you have to measure if the content has overflowed or not. I have used the solution from detect elements overflow using jquery.

Finally use this plugin to decide whether to show or hide the 'show more' link.

$("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide();

Upvotes: 1

Related Questions