JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flow-chart">
<img data-class="1" src="http://placehold.it/50x50">
<img data-class="2" src="http://placehold.it/50x50">
<img data-class="3" src="http://placehold.it/50x50">
</div>
<div class="1 hide_show">1</div>
<div class="2 hide_show" style="display: none">2</div>
<div class="3 hide_show" style="display: none">3</div>
JavaScript
(function () {
var active = false;
$(".flow-chart img").click(function () {
if (active) {
return;
}
active = true;
var div_class = $(this).data("class");
$(".hide_show:visible").fadeOut('slow', function() {
$("."+div_class).fadeIn("slow", function() { active = false; });
});
});
})();