JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<div id="brother-gallery" class="hider">Brother Content</div>
<div id="mitsu-gallery" class="hidden hider">Mitsu Content</div>
<div id="taki-gallery" class="hidden hider">Taki Content</div>

<br /><br />
<div id="brother-tag" class="hider">Brother Tagline</div>
<div id="mitsu-tag" class="hidden hider">Mitsu Tagline</div>
<div id="taki-tag" class="hidden hider">Taki Tagline</div>

<br /><br />
<p><a href="#" class="control" data-field="brother">Brother Link</a></p>
<p><a href="#" class="control" data-field="mitsu">Mitsu Link</a></p>
<p><a href="#" class="control" data-field="taki">Taki Link</a></p>

CSS

.hidden {
    display: none; 
}

JavaScript

$('.control').on('click', function (e) {
    e.preventDefault();
    var field = $(this).data('field');
    $('.hider:visible').fadeOut("slow", function () {
        $('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
    });
});