In the same page I have multiple sections.
One section will be shown and this will happen using an active class.
In the same page I have li buttons 1, 2 and 3 and when I click on one of them the section related to it appears and the old one disappears. For that purpose I'm using Javascript.
Also in the same page I have a next and previous button. When I click on the next button the next section should appear and the old one should disappear.
And also the related li to the section should have the active class, the same thing for the previous: when I click on it it should go to the old section and the current should disappear and the li class should be active.
When I'm in the first section the previous button should disappear and when I'm in the last section the next button should disappear.
How can I implement this behavior for the next and previous buttons in this way using Javascript?
Any Help Please!!?
let tab = document.querySelector(.nav li);
let tabs = document.querySelectorAll(.nav li);
let tabsArray = Array.from(tabs);
let section = document.querySelectorAll(.section);
let sectionArray = Array.from(section);
let nextButton = document.querySelector(.next);
let prevButton = document.querySelector(.previous);
let current = 0;
tabsArray.forEach((ele) => {
ele.addEventListener(click, function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove(active);
});
e.currentTarget.classList.add(active);
sectionArray.forEach((sec) => {
sec.classList.remove(active);
});
if(e.currentTarget.dataset.cont =='r1'){
prevButton.classList.add(disable);
}else{
prevButton.classList.remove(disable);
}
if (
document.querySelector(# + e.currentTarget.dataset.cont) ==
sectionArray[sectionArray.length - 1]
) {
nextButton.classList.add(disable);
} else {
nextButton.classList.remove(disable);
}
document.querySelector('#' + e.currentTarget.dataset.cont).classList.add(active);
});
});.section {
display: none;
}
.section.active{
display: block;
}
ul {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}
ul li {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
}
ul li.active{
opacity: 1 !important;
}
.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border:0;
outline: none;
cursor: pointer;
width: 100px;
}
.next.disable,
.previous.disable{
cursor: none;
opacity: .5;
}<ul class=nav>
<li class=active data-cont=r1>1</li>
<li data-cont=r2>2</li>
<li data-cont=r3>3</li>
</ul>
<section id=r1 class=section section-one active>
<h2>section 1</h2>
</section>
<section id=r2 class=section section-two>
<h2>section 2</h2>
</section>
<section id=r3 class=section section-three>
<h2>section 3</h2>
</section>
<button class=previous disable id=previous>Previous</button>
<button class=next id=next>Next</button>
