JSFiddle - React, Tailwind, and code Playground
HTML
<div class="contain">
<div class="yell">Click me!</div>
<div class="silent">
<p>I was hidden, but now I'm not</p>
</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() {
$('.yell').click(function() {
$(this).nextAll('.silent').slideToggle();
$(this).toggleClass("green");
});
});