Read more div with images expand/collapse Toggle excerpt/content

Question

Okay, I've been spending all day trying to figure out the right approach for this, but have come out short, so maybe someone here can point me in the right direction.

Problem: I have a div with class "article-content". There will be around 2-10 of these on the page. Each of them will contain output from a wysiwyg. i.e. texts wrapped in p-tags, some strong tags, em tags and even img tags.

I need to create a preview/excerpt version of these that wont show the images and will append a [...] to the end of x characters + a "read more" link. When this is clicked the full article will be shown including images.

Ive seen the following appraches:

1. Strip the content of the div after x characters and add [...] + link. This makes the content a bit fragile since it can strip end tags, and even strip the middle of an image tag resulting in broken html being outputtet.

2. Change the height on content element, and overflow:hidden;. This could result in an image overflowing out of the box - with parts of it inside, and even cut a line in half depending on the line-height vs. the content height. this makes the js very css dependant.

3. Create new content element with the first x characters and toggle display none/block on the short version and long version. This creates 2 instances of the text in the markup, which i would prefer. This would also make it impossible to take advantage of css transitions for the height when the elements expands.

I find it a little strange that i havent been able to find a bullet proof plugin for this supposedly simple - and much used - task. But maybe im just missing something. Maybe im google for the wrong terms. what is this thing offically called ? toggle expand? read-more-read-less? show more?

What would be considered the best approach? and is there a way to get around all these problems?

Thank you for your time

Answer 1

The best approach i think, if you want it all client-side is to wrap your text with wrapper div.

<div class="article">
  <div class="text short">
      Long Text
  </div>
  <span class="read-more">read more</span>

the .text.short will be set to fixed height for example height:100px;
the read-more will be set with click event that remove the short class, and add full class.

the Js will look like this:

    $(document).ready(function(){

        $(".read-more").click(function(){

            var $elem = $(this).parent().find(".text");
            if($elem.hasClass("short"))
            {
                $elem.removeClass("short").addClass("full");

            }
            else
            {
                $elem.removeClass("full").addClass("short");

            }

        });
    });
    

the css like this:

.article {
   border-bottom: 1px dotted grey;
   padding: 3px;
   margin: 2px;
}
.article .text {
   font-size: 12px;
   line-height: 17px;
   font-family: arial;
}
.article .text.short {
   height: 100px;
   overflow: hidden;
}
.article .text.full {

}
.read-more {
   cursor: pointer;
   display: inline-block;    
   font-weight: bold;
   padding: 3px;
   background-color: #06c;
   color: white;
   margin: 2px;
}

with the javascript code you can replace the characters, images to whatever you want.

I created for you full working example and look nice on jsFiddle

Edit
add ellipsis with jquery.

see on jsFiddle