Priyanka Pachori Priyanka Pachori - 2 months ago 9
HTML Question

Collapse/Open a table with font-awesome icon

Currently my label is collapsible, and it collapses a table. I want to add font-awesome icons with the label or heading; caret-down for table open and caret-right for table closed or collapsed. This should happen on click.

Answer

I've created a fiddle here https://jsfiddle.net/gjk3zepd/2/

This could solve your problem

jQuery

$(document).ready(function(){
  $('.collapse').hide();
  $('.content').hide();
  $('.expand, .collapse').bind('click',function(){
    $('.collapse').toggle();
    $('.expand').toggle();
    $('.content').slideToggle();
  });
});

HTML

<a href="#" class="expand"><span class="glyphicon glyphicon-chevron-right"></span></a>

<a href="#" class="collapse"><span class="glyphicon glyphicon-chevron-down"></span></a>

<div class="content">
Div Content
</div>
Comments