JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<a>next </a>
<h1>prev</h1>
<div> 
  <p>p</p>
  <p>pp</p>
  <p>ppp</p>
  <p>pppp</p>
  <p class="last">ppppp</p>
</div>

CSS

body * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

JavaScript

$(document).ready(function(){
  $("p:gt(0)").hide();
 $('h1').hide();
    $('a').click(function(){


 $("p:visible").hide("slow").next().show("slow");
 if($("p:visible").is(":last-child"))
      $('a').hide();
 $('h1').show();
});

    $('h1').click(function(){
 $("p:visible").hide("slow").prev().show("slow");
 if($("p:visible").is(":first-child")){
  $('h1').hide();
}
else
  $('h1').show();
});

});