JSFiddle - React, Tailwind, and code Playground

by Mike Zavarello

HTML

<div id="gallery">
    <a href="#" class="show_hide" id="image1">Show/hide first image</a>
    <a href="#" class="show_hide" id="image2">Show/hide second image</a>
    <a href="#" class="show_hide" id="image3">Show/hide third image</a>
</div>

<div id="image1Detail" class="slidingDiv">Here is the content for the first image.</div>
<div id="image2Detail" class="slidingDiv">Here is the content for the second image.</div>
<div id="image3Detail" class="slidingDiv">Here is the content for the third image.</div>

CSS

#gallery {
width: 1200px;
margin: 0 auto; }

.slidingDiv {
height:100px;
background-color: #99CCFF;
border-bottom:5px solid #3399FF;
text-align: center;
line-height: 100px;
display: none; }

.show_hide {
    display: block;
 }

JavaScript

$('.show_hide').click(function(event){
    event.preventDefault();     /* keep link event from firing; we don't want to go anywhere */
    $(".slidingDiv").hide();    /* hide all instances of the hidden div first */
    $("#" + this.id + "Detail").slideToggle();
});