JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<script src="http://m.movie.extremewebworks.com/js/libs/jquery.transit.js"></script>
<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>
    <div class="accordian-content">
        <p>value 1</p>
        <p>value 2</p>
        <p>value 3</p>
        <p>value 4</p>
        <p>value 5</p>
    </div>
</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").transition({
        height: '0px',
        display:'none'
    }, function(e) {
        $(this).removeClass("accordian-content-expanded");
    });
    /*
    $(".accordian-content-expanded").slideToggle(function(e) {
        $(this).removeClass("accordian-content-expanded");
    });

    
    $(this).children(".accordian-content").slideToggle(function(e) {
        $(this).addClass("accordian-content-expanded");
    });
*/
    
    $(".accordian-content-expanded").transition({
        height:'100px',
        display:'block'
    }, function(e) {
        $(this).addClass("accordian-content-expanded");
    });
    
});