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.

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