JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="set1">
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
    <div class="an">4</div>
</div>

<div id="set2">
    <div class="a1">5</div>
    <div class="a2">6</div>
    <div class="a3">7</div>
    <div class="an">8</div>
</div>

CSS

#set1, #set2 {
    width: 50px;
    cursor: pointer; 
}

div div {
    padding: 4px;
    text-align: center;
    border-bottom: 1px solid #333;
    font-family: Ariali, sans-serif;
    font-weight: bold;
}

#set2 {
    margin-top: 20px;
    background-color: #efefef;
}

JavaScript

var set2 = $('#set2');

set2.children().hide();

$('#set1 > div').click(function() {
    set2.find('.' + this.className).toggle();
});