JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="group">
    <div class="item first" id="pic"></div>
    <div class="item hide" id="text0"></div>
</div>

<div class="group">
    <div class="item first" id="pic1"></div>
    <div class="item hide" id="text1"></div>
</div>

<div class="group">
    <div class="item first" id="pic2"></div>
    <div class="item hide" id="text2"></div>
</div>

CSS

.first {
  background-color: black;
  height: 100px;
  width: 100px;
  margin: 10px;
 }

.hide {
  background-color: red;
  display: none;
  height: 100px;
  width: 100px;
  margin: 10px;
}

JavaScript

// $(".hide").hide(); - how about CSS?
$(".group").on("click", ".item", function() {
    $(this).hide().siblings().slideToggle("fast");
});