Toggle Read More Less Blog

Same page news item toggle

HTML

<div id='content' class="reveal-closed">
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff StuffStuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
</div>

<p class="open">Read more</p>
<p class="close" style="display:none;">Read less</p>

CSS

#button {
    background: #06f;
    color: white;
    width: 300px;
    padding: 10px;
   
}
#content {
    display: none;
    width: 300px;
    color: #333;
}
.reveal-open {
	overflow: auto;
	height: auto;
}

.reveal-closed {
	overflow: hidden;
	height: auto;
}
.close{
background:orange;
    padding:20px;
    cursor:pointer;
    color:black;
    width:100px;
    text-align:center;
}
.open{
  background:blue;
    padding:20px;
    color:white;
    cursor:pointer;
    width:100px;
    text-align:center;
}

JavaScript

// when #button is click do stuff in curly brackets
$("p").click(function () {
  //toggle content box - slide open and closed
  $("#content").stop().slideToggle();
  //change the word from Read more Read less when #button is clicked
  $("#content").toggleClass("reveal-closed").toggleClass("reveal-open");
  $("p").toggle();
  return false;  
  
 });

 $("p.open","p.close").hover(function () {	
     $(this).stop().css({
         "cursor": "pointer"
     });
 
});