JSFiddle - React, Tailwind, and code Playground

by mridulpv

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  <div class="panel-group" id="categories">
          <div class="panel panel-default">
            <div class="panel-heading" id="panel-category">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#categories" href="#category">
                   Categories
                </a>
              </h4> 
            </div>
            <div id="category" class="panel-collapse collapse in">
             <div class="panel-body">
                 <div id="allcategory" class="panel-collapse collapse in">
                     <a class="accordion-toggle" id="nounderline" data-toggle="collapse" data-parent="#category" href="#subcategory">All category</a>
                  
                 </div><!--All category-->   
                     <div id="subcategory">
                       <div id="realsestate">
                        <a class="accordion-toggle" id="nounderline" data-toggle="collapse" data-parent="#allcategory" href="#realsestatelist">
                          &emsp;&emsp;Realestate
                        </a>
                        <div id="realsestatelist" class="panel-collapse collapse">
                          <a id="nounderline">
                            <p>&emsp;&emsp;&emsp;&emsp;l1</p>
                            <p>&emsp;&emsp;&emsp;&emsp;l2</p>
                            <p>&emsp;&emsp;&emsp;&emsp;l3</p>
                            <p>&emsp;&emsp;&emsp;&emsp;l4</p>
                            <p>&emsp;&emsp;&emsp;&emsp;l5</p>
                            <p>&emsp;&emsp;&emsp;&emsp;l6</p>
                          </a>
                        </div>
                       </div>         
                        <div id="mobilephones">
                          <a class="accordion-toggle" id="nounderline" data-toggle="collapse"...

CSS

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
.panel-group .panel-heading + .panel-collapse .panel-body { border-top:0px; }
#nounderline{
    text-decoration:none;
}