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?
Suppose you've followed three-section within your body tag.
<body>
<section class="allSection firstTimeLoad">
<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 class="allSection">
<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 class="allSection">
<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").hide();
var parent=$('section');
var element = $(this).parent().is(':last-child');
if($(this).parent().is(':last-child'))
$('.firstTimeLoad').show();
else
$(this).parent().next().show();
});
});
function onPageLoad(){
$(".allSection").hide();
$(".firstTimeLoad").show();
}
</script>
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 class="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 class="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 class="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>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" class="hide">
Section 2
<button data-section-id="2">Next</button>
</section>
<section id="section-3" class="hide">
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";
}
})();