javascript function to selectively show and hide contents by Id

I am working on a project where I want to show page contents selectively.

1. Have buttons “next” and “previous”
2. contents are id-ed in a serial manner.

what I want to achieve is at the first page loading, show the first content(id=’item-0′) and only show the “next” button since there is no previous content, and when click on “next” button, hide currently showing contents(id=’item-0′) and show all the contents that are in (id=’item-1′) and so forth, and do not show the “next” button when it’s the last content.

this is what I got so far, on the page I first load every contents with display: none; so, nothing’s showing up of course. but I want to be able to show the first content(id=”item-0″) by changing the style display to inline-block. and then update the “which” that’s in the “next” button onclick action to the next id which is id=”item-1″ and dynamically update this “which” whenever either “next” or “previous” buttons clicked.

// page when first loaded.
<div class="container p-0 m-0" id="item-0" style="display:none;">
  <p>example data</p>
  <img src="example.com/img.png">
  <video src="abc.com/abc/def.mp4"></video>
</div>
<div class="container p-0 m-0" id="item-1" style="display:none;">
  <img src="example.com/img-5.png">
  <video src="abc.com/abc/def.mp4"></video>
  <div class="row"><h1>ABCD</h1></div>
</div>
<div class="container p-0 m-0" id="item-2" style="display:none;">
  <p>example data</p>
  <p>example data 2</p>
</div>
<a class="btn" onclick="nextBtn('item-0','item-1')">Next</a>
<a class="btn" onclick="prevBtn('item-0',null)" style="display:none;">Prev</a>

So far I worked on:

    function show_item(which) {
      var element = document.getElementById(which)
      element.style.display='inline-block';
    }

    function hide_item(which) {
      var element = document.getElementById(which)
      element.style.display='none';
    }

    function nextBtn(current_which, next_which) {
        // e.g. current_which = "item-0", next_which = "item-1"
        hide_item(current_which);
        show_item(next_which);
    }
    
    function prevBtn(current_which, prev_which) {
        // e.g. current_which = "item-1", prev_which = "item-0"
        hide_item(current_which);
        show_item(prev_which);
    }

what I haven’t figured out are:

1. how to update the current_which and next_which that go in to the “Next” and “Prev” buttons.
2. how to not show “Prev” button when the page is showing the first content, and how to now show “Next” button when the page is showing the last content.

Answer

I have prepared something for you. If it is not exactly what you are looking for, I hope it’ll you give some general idea on how to achieve what you want.

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var elements = document.getElementsByClassName('container')
//get the currentDiv ID
var currentDiv = 0;

//when next is clicked
next.addEventListener('click',function(){
    //we first check if the viewed div is not the last one
   if(currentDiv < 2){
      //if not we remove the .active class
      removeActive(currentDiv);
      //increment the ID of the current ID
      currentDiv += 1;
      //and add .active class to the next DIV
      addActive(currentDiv)
    }
})

prev.addEventListener('click',function(){
   //same thing with prev, we first test if the current div is not the first one
   if(currentDiv > 0){
      //if not we remove the .active class
      removeActive(currentDiv);
      //decrement the selected div
      currentDiv -= 1;
      //and add the .active class
      addActive(currentDiv);
   }
})

//below are 2 functions that handles the addActive & removeActive if the conditions are passed
function removeActive(currentDiv){
  document.getElementById('item-'+currentDiv).classList.remove('active');
}

function addActive(currentDiv){
    document.getElementById('item-'+currentDiv).classList.add('active');
}

.container.hide {
  display: none;
}

.active {
  display: block !important;
}

.btn {
  cursor: pointer;
}

<div class="container active hide p-0 m-0" id="item-0">
  <p>example data</p>
  <h3>Image For Div 1</h3>
  <img src="https://www.cloudways.com/blog/wp-content/uploads/Smart-Watch.jpg" width="100px" height="100px"/>
</div>
<div class="container hide p-0 m-0" id="item-1">
  <p>example data</p>
  <h3>Image For Div 2</h3>
  <img src="https://www.cloudways.com/blog/wp-content/uploads/Wireless-Phone-Chargers.jpg" width="100px" height="100px"/>
</div>
<div class="container hide p-0 m-0" id="item-2">
  <p>example data</p>
  <h3>Image For Div 3</h3>
  <img src="https://www.cloudways.com/blog/wp-content/uploads/Phone-Lenses.jpg" width="100px" height="100px"/>
</div>
<br/><br/><br/>
<a class="btn prev">Prev</a>
<a class="btn next">Next</a>