Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • moving between section page using next and previous button in javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 94
    Answer it

    In the same page i have multiple section.

    One section will be show and this will happen using a class active.

    In the same page i have li buttons 1, 2 and 3 when i click on one of them the section related appear and the old one disappear for that i'm using javascript to do it.

    Also in the same page i have a next and previous button when i click on the next button i should appear the next section and disapear the old one.

    And also the relate li to the section should have the class active the same thing for the previous when i click on it i should go to the old section and disappear the current one and the li number should be active.

    And when i'm in the first section the previous button should be disapear and when i'm in the last section the next button should be disapear

    How can i do the next and previous buttons in this way using javascrip?

    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("show");
        });
        e.currentTarget.classList.add("show");
    
        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.show{
    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: auto;
      opacity: .5;
    }
    
    <ul class="nav">
    <li class="show" 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>
    

     

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: