JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    <div id="topbar"></div>
    <h1>High Priority</h1>
<div class="container">
    <h2 class="collapsed">
        <span class="arrow">&#9655;</span>
         SEO
    </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>
        Performance</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>Medium Priority</h1>
<div class="container">
    <h2 class="collapsed">
        <span class="arrow">&#9655;</span>
        SEO</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>
        Performance</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>Low Priority</h1>
<div class="container">
    <h2 class="collapsed"><span class="arrow">&#9655;</span>
        SEO</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>
        Performance</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>
</div>

CSS

body { font-family:Arial; font-size:12px; }
h1, h2, li { cursor:default; }
h1 { font-size: 14px; margin-top: 30px; 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: 37px; display:none; }
/*ul li { list-style-type:square; }*/

#wrapper { width: 300px; height: 800px; margin: 10px auto; }

.container { margin-top: -5px; }

JavaScript

$(document).ready(function() {
    $(function() {
        $('h1').click(function() {
            if ($(this).hasClass("collapsed")) { //Folde begge ud
                $(this).next().children("ul").slideDown("200");
                $(this).removeClass("collapsed");
                $(this).next().children("h2").removeClass("collapsed");
                $(this).next().find(".arrow").html("&#9698;");
                
            }
            else if ($(this).next().children().hasClass("collapsed")) { //Folde resten ud
                $(this).next().children("ul").slideDown("200");
                $(this).next().children("h2").removeClass("collapsed");
                $(this).next().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;");
                
            }
        });
        $('h2').click(function() { //Folde denne ud
            if ($(this).hasClass("collapsed")) {
                $(this).next().slideDown("200");
                $(this).removeClass("collapsed");
                $(this).children(".arrow").html("&#9698;");
                
            }
            else { //Folde denne ind
                $(this).next().slideUp("200");
                $(this).addClass("collapsed");
                $(this).children(".arrow").html("&#9655;");
                
            }
            if (!($(this).hasClass("collapsed")) && !($(this).siblings("h2").hasClass("collapsed"))) {
                $(this).parent().prev().removeClass("collapsed");
            }
            });
        });
    });