CODEWITHSUNDEEP
javascripthtml
minjunkim7767
minjunkim7767

Reputation: 213

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.

Upvotes: 1

Views: 771

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28226

Here is a slightly more condensed version of a working script:

const btn = document.querySelectorAll('.btn'), // btn[0]: Prev,  btn[1]: Next
     divs = document.querySelectorAll('.container');

function render(n){
 [n,n!==divs.length-1].forEach((c,i)=>btn[i].style.visibility=c?null:"hidden"); // show/hide buttons
 divs.forEach((d,i)=>d.classList.toggle("hide",i!==n));                         // show/hide divs
}

render(divs.curr=1); // define the starting div
btn.forEach(b => b.onclick = () => {
  render( divs.curr += (b.textContent==="Next" ? 1 : -1) );
});
.hide { display: none; }
.btn { cursor: pointer; }
<div class="container 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>
<div class="container hide p-0 m-0" id="item-3">
  <p>example data</p>
  <h3>Image For Div 4</h3>
  <img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-224.jpg" height="100px" />
</div>
<div class="container hide p-0 m-0" id="item-4">
  <p>example data</p>
  <h3>Image For Div 5</h3>
  <img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-221.jpg" height="100px" />
</div>
<br/><br/><br/>
<a class="btn prev">Prev</a>
<a class="btn next">Next</a>

I designed the script to have a small footprint, i. e. only a few global variables - or better - constants: btn and divs. In divs.curr you will find the index of the currently "active" div.

This script is also open for changes to the markup: The number of divs can change to any number.

Upvotes: 1

Relcode
Relcode

Reputation: 521

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>

Upvotes: 2

Related Questions