JSFiddle - React, Tailwind, and code Playground

by designmode

HTML

<div id="accordian">
    <div id="slide1"><h2>Slide 1</h2></div>
    <div id="slide2"><h2>Slide 2</h2></div>
    <div id="slide3"><h2>Slide 3</h2></div>
</div>

CSS

#slide2, #slide3 { display:none; }
#slide1, #slide2, #slide3 { border:1px solid #ccc; width:200px; height:200px }
.buttons{
   font:normal 12px arial; 
   border-top:1px dashed #ccc;
   height:30px;
   position:absolute;
   top:170px; 
   width:200px;  
   float:right;    
}
.button {
    float:left;
    padding:5px 7px;
    border-right:1px dashed #ccc;
}

JavaScript

$('<div class="buttons"></div>').appendTo("#slide1, #slide2, #slide3");
$('<a href="#" title="Previous" class="button previous">Previous</a>').appendTo("#slide2 .buttons, #slide3 .buttons");
$('<a href="#" title="Next" class="button next">Next</a>').appendTo("#slide1 .buttons, #slide2 .buttons");


$("a.button:contains('Next')").click(function (e) {
   e.preventDefault();
   var currentSlide = $(this).parent().parent();
   var nextSlide = $(this).parent().parent().next();     
    $(currentSlide).fadeOut("normal", function () {

        if(!$(currentSlide).data('initialized') ) {
           $(currentSlide).data('initialized', true);
        }        
        
        $(nextSlide).fadeIn("normal").scrollTop(0);
    });    
});    

$("a.button:contains('Previous')").click(function (e) {
   e.preventDefault();
   var currentSlide = $(this).parent().parent();
   var previousSlide = $(this).parent().parent().prev();  
   $(currentSlide).fadeOut("normal", function () {
        $(previousSlide).fadeIn("normal").scrollTop(0);
    });   
});