JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<ul id="toc">
    <li><a href="">Chapter 0</a></li>    
    <li class="expand"><a href="">Chapter 1</a>
        <ul>
            <li><a href="">Sub Chapter 1-1</a></li>
            <li class="selected"><a href="">Sub Chapter 1-2</a></li>
            <li><a href="">Sub Chapter 1-3</a></li>
            <li><a href="">Sub Chapter 1-4</a></li>
        </ul>
    </li>
    <li><a href="">Chapter 2</a>
        <ul>
            <li><a href="">Sub Chapter 2-1</a></li>
            <li><a href="">Sub Chapter 2-2</a></li>
            <li><a href="">Sub Chapter 2-3</a></li>
            <li><a href="">Sub Chapter 2-4</a></li>
        </ul>    
    </li>
    <li><a href="">Chapter 3</a></li>
    <li><a href="">Chapter 4</a></li>
    <li><a href="">Chapter 5</a></li>
</ul>

CSS

ul#toc { font-size: 16px; font-family: arial; }
ul > li > a { text-decoration: none; display: 
    block; height: 40px; line-height: 40px; 
    background-color: #fff;
    padding-left: 5px;
}
ul > li > ul {
    box-shadow: 0px 0px 5px #000;
    padding-top: 10px;
    margin-top: -10px;
}
ul {
    width: 250px;
    border: 1px solid #ccc;
    overflow: hidden;
}

ul li { position: relative; overflow: hidden; border-top: 1px solid #ccc; }
ul li:first-child { border-top: none; }

ul li ul { position: absolute; z-index: 99; left: 10px; }

ul li.expand > a { box-shadow: 0px 0px 5px #000; border-left: 3px solid #00f; }

ul li.expand + li { box-shadow: 0px 0px 5px #000; }

JavaScript

$('li.expand').height( ( $('.expand ul').height()) + 40);