Category Covered

Show-hide or Read more-less article using javascript

 Here I have given the sample code .

 
CSS
 
.less.active .button-read-more {
    display: none;
}
.button-read-less {
    display: none;
}
.less.active .button-read-less {
    display: block;
}
.more {
    margin-top: 10px;
}
.more p {
    margin: 0;
    padding: 0;
}
 
Scripts
 
jQuery(function ($) {
    $(".more").hide();
    $('.button-read-more').click(function () {
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").prev().stop(true).slideDown("1000");
    });
    $('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").prev().stop(true).slideUp("1000");
    });
});
 
 
 
 
<div class="toggle">
      <div class="more" style="display:none">
            <div class="table-responsive">
            <!-- Table -->
                <table class="table">
                    <tr class="">
                        <td>Lorem Ipsum Sample Data</td>
                  </tr>
                 </table>
            </div><!--table-responsive-->
        </div><!--more-->
    
    <div class="less">
        <a class="button-read-more button-read" href="#read">Read More</a>
          <a class="button-read-less button-read" href="#read">Read Less</a>
    </div>
</div><!--toggle-->
 
Posts you may like
 
Top 15 Posts
Google+