JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    <div id="topbar">
        <h1>Headline 0</h1>
        <!--<a href="#">Expand all</a>-->
    </div>
    <h1 class="collapsed"><span class="arrow">&#9655;</span>Headline 1.1</h1>
<div class="container">
    <h2 class="collapsed">
        <span class="arrow">&#9655;</span>
         Subheadline 1.1.1
    </h2>
     <ul>
        <li>Lorem ipsum</li>
        <li>Dolor Sit</li>
        <li>Consectetur adipisicingr</li>
        <li>Exercitation ullamco laboris</li>
        <li>Excepteur sint occaecat</li>
    </ul>  
    <h2 class="collapsed"><span class="arrow">&#9655;</span>
        Subheadline 1.1.2</h2>
     <ul>
        <li>Lorem ipsum</li>
        <li>Dolor Sit</li>
        <li>Consectetur adipisicingr</li>
        <li>Exercitation ullamco laboris</li>
        <li>Excepteur sint occaecat</li>
    </ul>  
</div>

<h1 class="collapsed"><span class="arrow">&#9655;</span>Headline 1.2</h1>
<div class="container">
    <h2 class="collapsed">
        <span class="arrow">&#9655;</span>
        Subheadline 1.2.1</h2>
     <ul>
        <li>Lorem ipsum</li>
        <li>Dolor Sit</li>
        <li>Consectetur adipisicingr</li>
        <li>Exercitation ullamco laboris</li>
        <li>Excepteur sint occaecat</li>
    </ul>  
    <h2 class="collapsed">
        <span class="arrow">&#9655;</span>
        Subheadline 1.2.2</h2>
     <ul>
        <li>Lorem ipsum</li>
        <li>Dolor Sit</li>
        <li>Consectetur adipisicingr</li>
        <li>Exercitation ullamco laboris</li>
        <li>Excepteur sint occaecat</li>
    </ul>
    <h2 class="collapsed"><span class="arrow">&#9655;</span>
        Subheadline 1.2.3</h2>
    <ul>
        <li>Lorem ipsum</li>
        <li>Dolor Sit</li>
        <li>Consectetur adipisicingr</li>
        <li>Exercitation ullamco laboris</li>
        <li>Excepteur sint occaecat</li>
    </ul>   
</div>

<!--<h1 class="collapsed"><span class="arrow">&#9655;</span>Headline 1.3</h1>
<div class="container">
    <h2 class="collapsed"><span...

CSS

body { font-family:Arial; font-size:12px; }
h1, h2, li { cursor:default; }
h1 { font-size: 14px; margin: 30px 0 0 0; color:#777; text-shadow: 1px 1px #EEE; text-transform:uppercase; }
h2 { font-size: 14px; margin: 10px 0 0 20px; }
h1:hover, h2:hover { /* background: #F3F3F3;*/ }
ul { margin-left: 42px; display:none; }
/*ul li { list-style-type:square; }*/

#wrapper { width: 300px; height: 380px; margin: 10px auto; border: 1px #EDEDED solid; overflow-y: scroll; }
#topbar { height:20px;  border-bottom: 2px solid #CCC; margin-bottom: -10px; }
#topbar h1 { display:inline; }
#topbar h1:hover { background:#FFF; }
#topbar a { float:right; }

span.arrow {  }
h1 span.arrow { display:inline-block; margin-right:5px; color: #000; }
.container { margin-top: -5px; }

JavaScript

$(document).ready(function() {
    $(function() {
        $('h1').click(function() {
            if ($(this).hasClass("collapsed")) { //Folde alle ud
                $(this).next().children("ul").slideDown("200");
                $(this).removeClass("collapsed");
                $(this).next().children("h2").removeClass("collapsed");
                $(this).next().find(".arrow").html("&#9698;");
                $(this).find(".arrow").html("&#9698;"); 
                
            }
            else { //Folde alle ind
                $(this).next().children("ul").slideUp("200"); 
                $(this).next().children("h2").addClass("collapsed");
                $(this).addClass("collapsed");
                $(this).next().find(".arrow").html("&#9655;");               
                $(this).find(".arrow").html("&#9655;");  
                
            }
        });
        $('h2').click(function() { //Folde denne ud
            if ($(this).hasClass("collapsed")) {
                $(this).next().slideDown("200");
                $(this).removeClass("collapsed");
                $(this).children(".arrow").html("&#9698;");
                $(this).parent().prev().removeClass("collapsed");
                $(this).parent().prev().find(".arrow").html("&#9698;");  
                
            }
            else { //Folde denne ind
                $(this).next().slideUp("200");
                $(this).addClass("collapsed");
                $(this).children(".arrow").html("&#9655;");
                
            }

            var isAnySiblingExpanded = false;
            $(this).siblings("h2").each(function()
            {
                if(!($(this).hasClass("collapsed")))
                { 
                    isAnySiblingExpanded = true;
                }
            });
            if($(this).hasClass("collapsed") && !isAnySiblingExpanded)
            {
                $(this).parent().prev().addClass("collapsed");
               ...