Show/Hide Html sections on button click-CodePudding

I have 3 sections of code in the same page, in those 3 sections I have submit buttons. Initially 1st section should be visible, 2nd and 3rd sections are hidden. On button click from 1st section, 2nd section should become visible and hide 1st and 3rd sections. On button click from 2nd section, 1st and 2nd sections should be hidden and 3rd section should be visible. Can someone please help?

CodePudding user response：

Suppose you've followed three-section within your body tag.

<body>
    <section >
        <form action="">
          First name 1: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 1: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 1</button>
    </section>
    <section >
        <form action="">
          First name 2: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 2: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 2</button>
    </section>

    <section >
        <form action="">
          First name 3: <input type="text" name="FirstName" value="Mickey"><br>
          Last name 3: <input type="text" name="LastName" value="Mouse"><br>
        </form> 
        <button>Submit Button 3</button>
    </section>

</body>

To hide & show the sections according to your explanation, the following should be your JS code.

<script>
$(document).ready(function(){
  onPageLoad();
   
  $("button").click(function(){
    $(".allSection").show();
    $(this).parent().hide(); 
  });  
  
});

function onPageLoad(){
    $(".allSection").hide();
    $(".firstTimeLoad").show();    
  }
</script>

You may also have a look into the live demo from this LINK

CodePudding user response：

Try this code

$(document).ready(function(){
    $('.section:not(:first-child)').hide();
   
    $(".section button").click(function(){
        $('.section').hide();

        if( $(this).closest('.section').is(':last-child') ){
            $(this).closest('.section').siblings().first().show();
        }else{
            $(this).closest('.section').next().show();
        }
    });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <section >
        <div>
            <h2>Section 1</h2>
            <p>Ut ex consequat enim ullamco in do do proident ut sint adipisicing mollit do tempor.</p>
        </div>
        <button>Button 1</button>
    </section>
    <section >
        <div>
            <h2>Section 2</h2>
            <p>Veniam occaecat aliquip do irure incididunt consectetur aliquip do sit aute non duis mollit sed consequat.</p>
        </div>
        <button>Button 2</button>
    </section>
    <section >
        <div>
            <h2>Section 3</h2>
            <p>Sit anim ea eiusmod nulla ut laboris minim consectetur labore anim mollit id excepteur.</p>
        </div>
        <button>Button 3</button>
    </section>
</div>

CodePudding user response：

Is easy first create an html file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .hide {
            display: none;
        }
    </style>
    <body>
        <section id="section-1">
            Section 1
            <button data-section-id="1">Next</button>
        </section>
        <section id="section-2" >
            Section 2
            <button data-section-id="2">Next</button>
        </section>
        <section id="section-3" >
            Section 3
            <button data-section-id="3">Next</button>
        </section>
        <script src="./js/script.js"></script>
    </body>
</html>

And then a script.js file with your code.

(() => {
"use strict";

document.querySelectorAll("button").forEach((e) => {
    e.addEventListener("click", showNext);
});

function showNext(e) {
    let nextId, sectionId;
    sectionId = parseInt(e.target.getAttribute("data-section-id"));
    document.getElementById(`section-${sectionId}`).style.display = "none";

    // Next section id
    if (sectionId == 3) {
        nextId = 1;
    } else {
        // Get section id
        nextId = sectionId   1;
    }
    document.getElementById(`section-${nextId}`).style.display = "block";
}
})();