jQuery read more / less toggle

[alexpolicastro]

Hey there CSS-Tricks community.
I am working on a info-heavy website and need to be able to hide some of the text and do a read more button/link when clicked revels the rest of the text. I have been able get it to work before on single instances but need a way for multiple instances on one page. Can anyone recommended a way to do this with jQuery?

I know about http://plugins.learningjquery.com/expander/ but need away to pick where the break happens not dependent on the number of words or characters.

Thanks in advance!

[alexpolicastro]

Solid. This should work great. I have know how to implement jQuery just now getting into understanding and writing it. Thanks again.

[alexpolicastro]

Even better. Yeah both great, love the HTML injection format, much easier. Thanks again!

[mori]

And how could I achieve that if I click on a closed div´s read more that the other opened div´s will close?

[asdevargas]

Hello, thank you for the explaination, as it’s exactly what I have been searching for a while. It looks quite simple http://codepen.io/JoshBlackwood/pen/pEwHe but I have no idea about JavaScript. I follow the instructions about Using Java Script http://codex.wordpress.org/Using_Javascript but I may be doing something wrong, because it doesn’t show.
I uploaded a `readmoreless.js` file (with your code pasted in it) to `ThemeName/js` folder and in `header.php` added
``.
Also added CSS and HTML code in page. Nothing :(
Any help would be very much appreciated…! Thank you in advance

[MichaelS]

http://codepen.io/JoshBlackwood/pen/pEwHe Thanks for this.

One issue I’ve encountered: if you click ‘Read More’ on more than one paragraph, then click ‘Read Less’ on any one of the paragraphs, the other paragraphs will show the ‘Read More’ link AND the additional content with the ‘Read Less’ link.

I tweeked the JoshBlackwood example to behave better with multiple Read More/Read Less paragraphs on the same page.
http://codepen.io/anon/pen/CIqDf

[Carla]

Hey,

The code you provided Josh is very useful! Glad I stumbled on this page. The only thing I am noticing is that it doesn’t seem to function properly if you are trying to hide more then one paragraph.

I would like to hide the end of one paragraph along with another paragraph and it won’t let me–(or should I say, it’s not working the way it should be). Would you happen to know a quick fix to achieve that functionality? Any help would be fantastic.

Thanks a ton in advance!

Carla D.

[Legendary Power]

Hello,
I don’t know if i actually undestand your problem but i just prepared a pen which may help.
https://codepen.io/legendaryPower/pen/dvJQvB

[Mottie]

You can accomplish the same thing without using javascript…

http://codepen.io/Mottie/pen/bqLaJm

HTML template

<article>
  ....
  <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox">
  < div class="read-more-content">
    ...
  < /div>
  <label class="read-more-toggle-label" for="read-more-toggle-1">Read </label>
</article>

Change the number in “read-more-toggle-1” if you add more than one “Read More” block

CSS

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.read-more-toggle {
  display: none;
}
.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  padding: 5px;
  margin: .5em;
  font-size: .8em;
  background: #555;
  color: white;
}
.read-more-toggle-label:after {
  content: "More";
  display: inline-block;
}
.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
    than the content */
  max-height: 1000px;
}
.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less";
}

[Legendary Power]

Thanks,
Mottie your answer was an awesome one but the animation is not perfect maybe you should improve it.

[taran8184]

We can do using CSS and a class switching method with jQuery

Source – http://www.freakyjolly.com/custom-jquery-function-read-more-and-read-less/
Demo here – http://freakyjolly.com/demo/ReadMore/customReadMore.html

JavaScript:

function AddReadMore() {
    //This limit you can set after how much characters you want to show Read More.
    var carLmt = 280;
    // Text to show when text is collapsed
    var readMoreTxt = " ... Read More";
    // Text to show when text is expanded
    var readLessTxt = " Read Less";


    //Traverse all selectors with this class and manupulate HTML part to show Read More
    $(".addReadMore").each(function() {
        if ($(this).find(".firstSec").length)
            return;

        var allstr = $(this).text();
        if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
            $(this).html(strtoadd);
        }

    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
        $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
}
$(function() {
    //Calling function after Page Load
    AddReadMore();
});

CSS:

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
    display: none;
}

.addReadMore.showmorecontent .readMore {
    display: none;
}

.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    color: blue;
    cursor: pointer;
}

.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
}

HTML:

<h3>Show More Content</h3>
<p class="addReadMore showlesscontent">Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt</p>

[Author]

Posts