JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="container">
    <div class="hero-unit">
        <h2>Bootstrap-jQuery collapse example</h2>
        <p>Based on <a href="http://jsfiddle.net/Sherbrow/68RXP/">fiddle 68RXP</a></p>  
        <div class="collapse-group">
            <p><a class="btn" data-toggle="collapse" data-target="#demoout">Open outer div &raquo;</a></p>
            <div class="collapse in" id="demoout">
                <h1>Outer div title</h1>
                <p>Outer div text</p>
                
                <div class="collapse-group">
                    <p><a class="btn" data-toggle="collapse" data-target="#demoin">Open inner div &raquo;</a></p>
                    <div class="collapse in"  id="demoin">
                        <h2>Inner div title</h2>
                        <p>Inner div text</p>
                        
                     <div class="collapse-group">
                    <p><a class="btn" data-toggle="collapse" data-target="#demoinin">Open inner div &raquo;</a></p>
                    <div class="collapse in"  id="demoinin">
                        <h3>Inner-inner div title</h3>
                        <p>Inner-inner div text</p>
                    </div>
                    </div>    
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
        padding-top: 20px;
        padding-bottom: 40px;
      }

JavaScript

$(document).ready(function(){
          $(".collapse").collapse();
});