JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<ul class="accordian-list">
<li class="accordian-item"><span class="accordian-item-title">Item 1</span>
    <ul class="accordian-content">
        <li>value 1</li>
        <li>value 2</li>
        <li>value 3</li>
        <li>value 4</li>
        <li>value 5</li>
    </ul>
</li>
<li class="accordian-item"><span class="accordian-item-title">Item 2</span>
    <ul class="accordian-content">
        <li>value 1</li>
        <li>value 2</li>
        <li>value 3</li>
        <li>value 4</li>
        <li>value 5</li>
    </ul>
</li>
<li class="accordian-item"><span class="accordian-item-title">Item 3</span>
    <ul class="accordian-content">
        <li>value 1</li>
        <li>value 2</li>
        <li>value 3</li>
        <li>value 4</li>
        <li>value 5</li>
    </ul>
</li>
<li class="accordian-item"><span class="accordian-item-title">Item 4</span>
    <ul class="accordian-content">
        <li>value 1</li>
        <li>value 2</li>
        <li>value 3</li>
        <li>value 4</li>
        <li>value 5</li>
    </ul>
</li>
</ul>

CSS

.accordian-item
{
   color:#fff;
background-color:#000;
font-weight:bold;
 font-size:1.1em;   
}

.accordian-content
{
  display:none;
    background-color:#c30000;
    font-size:1em;
    font-weight:normal;
}

JavaScript

$(".accordian-item").on("click", function(e) {

    $(".accordian-content-expanded").slideToggle(function(e) {
        $(this).removeClass("accordian-content-expanded");
    });
    $(this).children(".accordian-content").slideToggle(function(e) {
        $(this).addClass("accordian-content-expanded");
    });

});