• # January 24, 2013 at 2:01 pm

    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 but need away to pick where the break happens not dependent on the number of words or characters.

    Thanks in advance!

    # January 24, 2013 at 2:18 pm

    This reply has been reported for inappropriate content.

    Super simple stuff. Why not wrap the content you want initially hidden in a div, slap an h3 or something in before it, and go something like this:

    // Hide the extra content initially, using JS so that if JS is disabled, no problemo.

    // Set up the toggle.
    $(‘.read-more-toggle’).on(‘click’, function() {


    Edited to add: After reading the link you posted, I think I may have misunderstood what you’re wanting. If you want this to be inline, the concept is similar, and only slightly more complicated. You could wrap the content you want to be expanded in a span, and use JS to dynamically insert a ‘read more’ link. I’ll fork my CodePen with an example, one sec.

    # January 24, 2013 at 2:26 pm

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

    # January 24, 2013 at 2:37 pm

    This reply has been reported for inappropriate content.

    Edit: Didn’t see your reply. No problem, glad I could help!

    Here’s another example, of this done inline, more like the expander plugin but without the added dependency (or features). This is hacked together, and could certainly be done cleaner, just as a disclaimer.

    Edited again: Cleaner version with no HTML injection, but this also removes a lot of the convenience of just adding a class to a span to handle everything for you:

    # January 24, 2013 at 4:06 pm

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

    # May 6, 2013 at 12:22 pm

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

    # May 28, 2013 at 3:13 am

    Hello, thank you for the explaination, as it’s exactly what I have been searching for a while. It looks quite simple but I have no idea about JavaScript. I follow the instructions about Using Java Script 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

    # May 28, 2013 at 3:25 am

    This reply has been reported for inappropriate content.

    Unless there’s something else going on, the url to the readmoreless.js-file is not /js/readmoreless.js, but is likelier to be along these lines: wp-content/themes/ThemeName/js/readmoreless.js, which might very well be what the issue is.

    # June 14, 2013 at 5:55 pm 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.

    # December 18, 2013 at 1:10 pm


    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.

    # March 19, 2017 at 9:28 am

    I don’t know if i actually undestand your problem but i just prepared a pen which may help.

    # March 20, 2017 at 11:26 am

    You can accomplish the same thing without using javascript…

    HTML template

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

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


    .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";
    # March 23, 2017 at 12:06 am

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.