JSFiddle - React, Tailwind, and code Playground

by Ethan Hammond

HTML

<div id="test"> <a href="#" class="expand">Expand</a>

    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
</div>
<br>
<br>
<div id="test2"> <a href="#" class="expand">Expand</a>

    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
    <div class="contain">
        <div class="yell">Click me!</div>
        <div class="silent">
            <p>I was hidden, but now I'm not</p>
        </div>
    </div>
</div>

CSS

.yell {
    cursor:pointer;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    background: red;
}
.contain {
    border: solid;
    border-width: 3px;
}
.silent {
    display: none;
}
.green {
    background: green;
}

JavaScript

$(function () {
    $('.expand').click(function () {
        $(this).parent().find('.silent').slideToggle();
    });
});