everyone.
I would like to ask if it is possible to show each section per button click in JQuery or JS?
<section style="display: none;">section1<section>
<section style="display: none;">section2<section>
<section style="display: none;">section3<section>
<section style="display: none;">section4<section>
<section style="display: none;">section5<section>
<section style="display: none;">section6<section>
<button>Show each per click</button>
You'll need to use index() function .. See the next example
$("button").on("click" , () => {
let index = !$("section.show").length || $("section.show").index() == $("section").length ? 0 : $("section.show").index();
$("section") // all sections
.removeClass("show") // remove show class to hide all sections
.filter("section:eq("+index+")") // desired section by index
.addClass("show"); // show the section
});
// to show spacific section
// index starts from 0 so 0 mean the first section change 0 to 1 or 2 ... and try it
$("section").eq(0).addClass("show");section{
display : none;
}
section.show{
display : block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>section1</section>
<section>section2</section>
<section>section3</section>
<section>section4</section>
<section>section5</section>
<section>section6</section>
<button>Show each per click</button>