JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
         <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
          <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
        <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
          <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
           <li class="toggle">
        <div class="toggle-content">
        <h2 class="toggle-title">Title</h2>
            <aside> Content</aside>
        </div>
        </li>
    </ul>

CSS

aside {
    display: none;
}

JavaScript

$('.toggle').click(function(){
        $('aside').slideUp();
        $(this).find('aside').slideToggle();
        e.stopImmediatePropagation();
    });