Show more/less with effect

Question

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!

So, your question is...? It is not about the code you found and posted here, but about the code that creates the link, isn't it? If so, show us that! — Bergi, Nov 25 '12 at 21:36
There isn't actually any logic here that shows or hides content. The `showContent` and `hideContent` functions are missing. — Asad Saeeduddin, Nov 25 '12 at 21:42
@sabithpocker: Yes, I saw that - but I could not find any code related to his problem (or any question). Else, the answer would be http://jsfiddle.net/Wpn94/3/ - now there is no "show more" link for less than one line! — Bergi, Nov 25 '12 at 21:42
@MarkI: You can check the `clientHeight` and `scrollHeight` of the div the text is in and compare them to each other to decide if you need to show the link or not. See my answer for more details and a working demo. — Nope, Nov 25 '12 at 22:20

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

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;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 25 '12 at 22:04

Nope

22,147
7
47
72

This code works fine on Chrome, but doesnt work on IE, any idea why? – Mark Nov 26 '12 at 19:45
@Markl: For some reason in Chrom I had to deduct 1 from the `scrollHeight ` like this: `var actualHide = $content[0].scrollHeight - 1;` It seems in IE 10 it needs to have 2 deducted, then it works there too, like this: `var actualHide = $content[0].scrollHeight - 2;` Without the deductions the problem is that the `scrollHeight` is off by 1 in chrome and 2 in IE, which causes the link to show when you only have exactly 2 lines. I do not know myself why this exactly is but it may have to do with the way borders/margins/paddings or the general box-model is used when `scrollHeight` is calculated. – Nope Nov 26 '12 at 19:59
So changin value from 1 to 2 should fix that problem, or I maybe I misunderstood you, because it is still bugged on IE. – Mark Nov 26 '12 at 20:04
@MarkI: Yes, changing the `-1` to `-2` worked for me on IE 10. When you say "not working" what do you mean? Because changing the number for the deduction in the fiddle will make sure that the link in IE is not displayed if the text is exactly the 2 visible lines. If you have a fiddle which does not work in IE I can have a look at it if you like. – Nope Nov 26 '12 at 20:10
@MarkI: I only have IE10 and even when going into IE9 or IE8 mode it still works. The link is hidden (with the -2) when it is only 2 lines of data and if the link is displayed it works fine showing and hiding the text as required. – Nope Nov 26 '12 at 20:27
@MarkI: Ah, I didn't know that. I used IE10 in IE9 mode. Could be the reason why the console.log worked for me. – Nope Nov 26 '12 at 21:08
Ok, now it works perfect, removed console.logs. Thank you very much for your help! :) – Mark Nov 26 '12 at 21:11
No worries, I'm glad you worked it out. I will also keep this in mind that the `console.log` can cause issues in IE. – Nope Nov 26 '12 at 22:16
This is a great solution however we do not want to use jQueryUI for this small functionality. any ideas what part uses that library? – JasonDavis Jul 12 '13 at 16:16
@jasondavis: `switchClass()` is part of jQueryUI. `toggleClass()` is standard jQuery. See the [**DEMO using toggleClass()**](http://jsfiddle.net/fVkQF/) Is that what you were looking for? – Nope Jul 12 '13 at 20:40

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

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();

edited May 23 '17 at 10:30

Community

1
1

answered Nov 25 '12 at 21:55

Tariqulazam

4,535
1
34
42

timaschew · Answer 3 · 2012-11-25T22:03:34.043

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/

JP_ · Answer 4 · 2012-11-28T07:21:02.803

1

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

edited Nov 28 '12 at 07:21

answered Nov 25 '12 at 22:21

JP_

1,636
15
26

1

checking for `
` is hardly reliable... you are assuming there are any. Alternatively, someone might have even placed on at the beginning – charlietfl Nov 25 '12 at 22:47

Show more/less with effect

4 Answers4

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