JSFiddle - React, Tailwind, and code Playground

by Uttam Kumar Roy

HTML

<a href="#" class="show_hide"><img src="image.jpg"></a>
<div class="slidingDiv">
    <h2>Title 1</h2>
    <p>text 1</p>
</div>
<a href="#" class="show_hide"><img src="image.jpg"></a>
<div class="slidingDiv">
    <h2>Title 2</h2>
    <p>text 2</p>
</div>

JavaScript

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {
          
         //$(".slidingDiv").slideToggle();
         var isvisible = $(this).next('.slidingDiv').is(':visible');
      
         if ( isvisible ) {
           $(this).next('.slidingDiv').hide();
         } else{
           $(this).next('.slidingDiv').show(); 
         }
    });

});