JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="accDiv">
 <ul class="parent">
        <li>
            <a href="#" class="slide">Title One</a>
            
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
            
         </li>
    </ul>

    <ul class="parent">
        <li>
            <a href="#" class="slide">Title Two</a>
            
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
            
         </li>
    </ul>
    
    <ul class="parent">
        <li>
            <a href="#" class="slide">Title Three</a>
            
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
            
         </li>
    </ul>
    
    <ul class="parent">
        <li>
            <a href="#" class="slide">Title Four</a>
            
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
            
         </li>
    </ul>
    
    <ul class="parent">
        <li>
            <a href="#" class="slide">Title Five</a>
            
            <ul class="child">
                <li><a href="#">Link One</a></li>
    ...

CSS

a {
    outline:none;
}

ul{
    list-style:none;
}
ul.parent { 
    margin:0px;
}
ul.parent a {
    display:block;
    width:200px;
    border-bottom:1px solid #336699;
    background:#3399FF;
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:none;
    padding:7px;
}

ul.parent a:hover
{
    color:#000000;
    background:#66CC66
}

ul.child a
{
    background:#333333;
    color:#FFFFFF;
    border-bottom:1px solid #f6f6f6;
    font-weight:normal;
    margin-left:-40px;
    padding:7px;
    width:200px;
    display:block;
    line-height:10px;
}

ul.child a:hover
{
    color:#3333333;
    background:#CCCCCC
}

JavaScript

$(function(){
    // hide all links except for the first
    $('ul.child:not(:first)').hide();
    $("a.slide:first").css("background-color","#FF9900");

    $('ul.parent a.slide').click(function(){
        $('ul.parent a.slide').css("background-color","#3399FF");

        $('ul.parent a.slide').mouseout(function(){
            $(this).css("background-color","#3399FF");
        });

        $('ul.parent a.slide').mouseover(function(){
            $(this).css("background-color","#66CC66");
        });

        $(this).mouseout(function(){
            $(this).css("background-color","#FF9900");
        });

        // slide all up
        $('ul.child').slideUp('slow');

        // show the links of current heading
        $(this).next().find('a').show();

        // slide down current heading
        $(this).next().slideDown('fast');

        // prevent default action
        return false;
    });
});