JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

<div  id="page2" >
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
</div><!--end div 1-->
<div  id="page3" >
    <p>Lorem ipsum dolor sit amet. 3</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
</div><!--end div 2-->
<div  id="page4" >
    <p>Lorem ipsum dolor sit amet. 4</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
</div><!--end div 3-->
<div id="page5" >
    <p>Lorem ipsum dolor sit amet. 5</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
    <p>Lorem ipsum dolor sit amet. 2</p>
</div><!--end div 4-->

<div class="container">
   <div class="text-center">
      <ul class="pagination pagination-lg">

         <li><a href="#" onclick="showPages('2')">2</a></li>
         <li><a href="#" onclick="showPages('3')">3</a></li>
         <li><a href="#" onclick="showPages('4')">4</a></li>
         <li><a href="#" onclick="showPages('5')">5</a></li>

      </ul>
   </div>
</div>

JavaScript

showPages(2);
function showPages(id){


    var totalNumberOfPages = 5;
    for(var i=1; i<=totalNumberOfPages; i++){

        if (document.getElementById('page'+i)) {

            document.getElementById('page'+i).style.display='none';
        }

    }
        if (document.getElementById('page'+id)) {

            document.getElementById('page'+id).style.display='block';
        }
};