Show and Hide div jQuery

Something Like that:
Show and Hide div jQuery

First we will see normal html code.
For that you need to create first html code.

HTML

<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
  <p class="show_area"> the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p><span class="show_d">Read More</span><span class="hide_d">Read Less</span>
</div>

After that add this CSS code.

CSS

.content .show_area {
  display: none;
}
.content span {
  display: inline-block;
  background: #ccc;
  padding: 8px 10px;
  cursor: pointer;
}
.content span.hide_d {
  display: none;
}
.content.active .show_area {
  display: block;
}
.content.active span.show_d {
  display: none;
}
.content.active span.hide_d {
  display: inline-block;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('.content span').click(function(){
  $(this).parents('.content').toggleClass('active')
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”oeMReb” default_tab=”css,result” user=”pradeepanvi”]See the Pen Show and Hide div jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see