How to use view more & view less content simple code.

How to use view more & view less content simple code.

In this post i used view more & view less link or button  when the content is more to show simple code.

 HTML 

<div class="OverContent">
<p>Villa Sensel, featuring 6 bedrooms to accomodate a minimum of 12 guests, it’s the most comfortable at the best rate villa in the market of Bali, offering great service and plenty of facilities. It is placed in the most exclusive area in the center of Seminyak, at walking distance from many restaurants and shops. Ideal for families or a big group of friends, it is made of 2 villas interconnected by a door at the center of 2 gardens and featuring two swimming pools, two living rooms and two kitchens.</p>
</div>

<div class="TabView">
<a href="JavaScript:Void(0)" class="TabViewShow">View More
<span class="lnr lnr-chevron-down"></span>
</a>
<a href="JavaScript:Void(0)" class="TabViewHide">View less
<span class="lnr lnr-chevron-up"></span>
</a>
<hr class="TabHr">

</div>


More information please visit this url https://www.papawebdesigner.com/


 CSS 

.OverContent {
   height: 200px;
   overflow: hidden;
}
.OverContentUp{
 height: auto;
}
.TabView .TabViewHide{
 display: none;
}


 JS 

<script>
$(document).ready(function(){
 $(".TabViewShow").click(function(){
   $(".OverContent").addClass('OverContentUp');
   $('.TabViewHide').show();
   $(this).hide();
 });

 $(".TabViewHide").click(function(){
   $(".OverContent").removeClass('OverContentUp');
   $('.TabViewShow').show();
   $(this).hide();
 });
});
</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/callmehitesh/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992

Follow on pinterest    -  https://in.pinterest.com/frontendissue/