shrewdbeans shrewdbeans - 3 months ago 18
CSS Question

How to create a "show more" button and specify how many lines of text can be initially shown

I'm looking for a way to create a slide out 'show more' feature on my responsive site, which cuts off after two lines of a paragraph.

I've achieved this before with a static website, by applying a set height to the container and using

overflow: hidden
, and then animating the height of the container.

But being responsive, the container squashes the text at different browser widths, so the text might take up more/less room. Also there may be different content above the paragraph each time pushing it down. So the setting
height
might not cover two lines exactly.

Please check out this jsFiddle: http://jsfiddle.net/XVAzU/ if you need to demonstrate.

So I need to cut off after two lines of the paragraph, no matter what width the container is or what comes before or after that paragraph.

Thanks for looking!

Answer

Starting from your fiddle and wrapped the content into a <div> with a default class of content, used for selection and a class called hideContent which will be swapped with showContent when clicking the show more/show less link.

I also removed the <p> the text was in. The text is now within the content-div and we are also now able to apply correct height and line-height settings.

HTML:

<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
    <div class="content hideContent">
        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.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>​

CSS:

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

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

I'm assuming setting the line-height will ensure it is the same in all browsers. I'm not 100% certain on that though.

I attached a click event to the "show more" link which switches the classes on the div using jQueryUI switchClass():

$(".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);
});​

DEMO - show more / show less and applying line-height and animation

The above code is an example only but should get you started into the right direction.

Comments