JSFiddle - React, Tailwind, and code Playground

by adamatan

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<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" href="#">Open outer div &raquo;</a></p>
            <div class="collapse">
                <h2>Outer div title</h2>
                <p>Outer div text</p>
                
                <div class="collapse-group">
                    <p><a class="btn" href="#">Open inner div &raquo;</a></p>
                    <div class="collapse">
                        <h2>Inner div title</h2>
                        <p>Inner div text</p>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>
    
    
</div>

CSS

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

JavaScript

$('.btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});