JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<ul class="list">
    <li>Item 1
        <p>>> Item 1 P</p>
        <ul>
            <li>Item 1.1
                <p>>> Item 1.1 P</p>
            </li>
            <li>Item 1.2
                <p>>> Item 1.2 P</p>
            </li>
            <li>Item 1.3
                <p>>> Item 1.3 P</p>
            </li>
        </ul>
    </li>
    <li>Item 2
        <p>>> Item 2 P</p>
    </li>
    <li>Item 3
        <p>>> Item 3 P</p>
    </li>
</ul>

CSS

ul p {
    display: none;
}
li {
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    $(".list li").click(function () {
        $(this).find("p").eq(0).toggle();
    });
});