JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<div class="myContainer">
    <p>
        <a class="toggle-trigger">
            Click to toggle
        </a>
    </p>
    <div id="toggle-wrap">
        <div class="style-single">
            Random Text
        </div>
    </div>
</div>

<div class="myContainer">
    <p>
        <a class="toggle-trigger">
            Click to toggle 2
        </a>
    </p>
    <div id="toggle-wrap">
        <div class="style-single">
            adfadsfasdf
        </div>
    </div>
</div>

<div class="myContainer">
    <p>
        <a class="toggle-trigger">
            Click to toggle 3
        </a>
    </p>
    <div id="toggle-wrap">
        <div class="style-single">
            adfadsfasdf
        </div>
    </div>
</div>

<div class="myContainer">
    <p>
        <a class="toggle-trigger">
            Click to toggle 4
        </a>
    </p>
    <div id="toggle-wrap">
        <div class="style-single">
            adfadsfasdf
        </div>
    </div>
</div>

CSS

a{
    cursor:pointer;   
}

JavaScript

// Toggle
$(document).ready(function() {
    $(".toggle-trigger").click(function() {
       $(this).closest('.myContainer').find('#toggle-wrap').toggle('slow');
    });
});