JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="parent">
    parent
    <p class="child">child</p>
    <p class="child">child</p>
    <p class="child">child</p>
</div>


<br><br>

<a href="#" id="parentButton">toggle parent</a>
<br>
<a href="#" id="childButton">toggle children</a>

CSS

.parent { padding:2em; background:#ddd; overflow:auto; text-align:center; }
.child { margin:1em auto 0;; width:50%; padding:1em; background:#eee; }
.red { background-color: red; }

#parentButton, #childButton { display:block; width:6.5em; margin: 0 auto; padding:.5em; background:red; color:#fff; text-decoration:none; text-align:center; }

JavaScript

$(function() {
    $( "#parentButton" ).click(
        function() {
            $( ".parent" ).toggleClass("red", 20);
        });
});



$(function() {
    $( "#childButton" ).click(
        function() {
            $( ".parent" ).children().toggleClass("red", 20);
        });
});