JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<div id="1">
<img src="img/1.gif" alt="Card Name 1" width="176" height="276"/><br/>
<h1 style="font-family: sans-serif;">Card Name 1</h1>
</div>

<div id="2">
<img src="img/1.gif" alt="Card Name 2" width="176" height="276"/><br/>
<h1 style="font-family: sans-serif;">Card Name 2</h1>
</div>

<div id="3">
<img src="img/#.gif" alt="Card Name 3" width="176" height="276"/><br/>
<h1 style="font-family: sans-serif;">Card Name 3</h1>
</div>

JavaScript

$(document).ready(function(){
   
    var i=0,
        $cards = $("div").hide();
    $cards.click(function(){
        $cards.eq(i).slideUp(function() {
            i = (i+1)%$cards.length;
            $cards.eq(i).slideDown();    
        });            
    }).eq(0).slideDown();   
    
});