JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<!--  Live Preview -->
<div class="contingut" id="section1"> Contenido 1 </div>
<div class="contingut" id="section2"> Contenido 2 </div>
<div class="contingut" id="section3"> Contenido 3 </div>
<div class="contingut" id="section4"> Contenido 4 </div>
<div class="contingut" id="section5"> Contenido 5 </div>

<!----------------->
<a hreF="#" class="boton" data-indice="1">Mostrar Contenido 1</a>
<br>
<a hreF="#" class="boton" data-indice="2">Mostrar Contenido 2</a>
    <br>
<a hreF="#" class="boton" data-indice="3">Mostrar Contenido 3</a>
        <br>
<a hreF="#" class="boton" data-indice="4">Mostrar Contenido 4</a>
            <br>
<a hreF="#" class="boton" data-indice="5">Mostrar Contenido 5</a>

CSS

.contingut {
    opacity: 0;
}

JavaScript

$(document).ready(function(){
    $(".boton").on("click", function(e){
        e.preventDefault();
        var indiceDiv = $(this).data("indice");
        $(".contingut").animate({left:"-300px",opacity:"0"},500);
        $("#section" + indiceDiv).animate({left:"0px",opacity:"1"},500);
    });
});