JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="flipper">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">two</div>
<div style="margin:10px 0px 80px 0px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">three</div>
<div style="margin-top:10px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>

CSS

.flip {
  display: none;
  color: #282828;
}
.flipper {
  margin-top: 10px;
}

JavaScript

$(document).ready(function() {
var $flips = $('.flip');
$(".flipper").click(function() {
var $cur = $(this).next().stop().slideToggle("fast");
$flips.not($cur).stop().slideUp()
});
});