Hide and show multiple div with a single button click ?

Question

I am New to JS

I am trying Questions Page in javascript

Like
Multiple Question Coming one by one
2 Button back and Next
i want when i check on next current div hide and next div(question) Show when click on back previous div show and current hide

Multiple div are there

Please help me

What I have tried:

$('a.slick-hide').bind('click', function(){
var $div1 = $('#box1'), $div2 = $('#box2')
if ( $div2.is(':visible') ) {
$div2.hide();
} else if ( $div1.is(':visible') && $div2.is(':hidden) ) {
$div1.hide();
} else {
$div1.show();
$div2.hide();
}
});

<html>

<head>

</script>

</head>

<body>

<p> JavaScript is the programming language of HTML and the Web. <br />

Programming makes computers do what you want them to do. <br />

JavaScript is easy to learn. </p>

</div>

<p>hello</p>

</div>

</body>

</html>

Metta Chittibabu · Answer

one two three four Next Previous .hide { display : none; } $(".hide").first().addClass("current").show(); $( "#next" ).click(function() { var current = $(".current"); var next = $(current).next(); if($(next).length > 0) { $(next).addClass("current").show(); $(current).removeClass("current"); $(current).hide(); } }); $( "#prev" ).click(function() { var current = $(".current"); var previous = $(current).prev(); if($(previous).length > 0) { $(previous).addClass("current").show(); $(current).removeClass("current"); $(current).hide(); } }); Refer the following link https://jsfiddle.net/chitti535/47qpcuxy/4/ I hope the above thing works for you Thanks.

Datta Sai Krishna · Answer

Hi, Maintain two hidden variables which stores current and previous div IDs and create two click events for previous and next. So now if user presses Next initially assign current div id to previous div id hidden variables and then get next divid and assign it to current divid variable. Now hide previous div id and show current div id variable div. similarly can be done for Previous button click event.

Jenith Thakkar · Answer

jQuery previous sibling example div { width: 50px; height: 50px; margin: 10px; float: left; border: 1px black solid; padding: 3px; } p { clear: left; margin: 10px; } div1 div2 div3 div4 div5 div6 Move to Next Move to Previous Sibling var $currDiv = $( "#startPrev" ); $currDiv .css( "background", "red" ); $( "#prev" ).click(function() { $currDiv = $currDiv .prev(); $( "div" ).css( "background", "" ); $currDiv .css( "background", "red" ); }); $( "#next" ).click(function() { $currDiv = $currDiv .next(); $( "div" ).css( "background-color", "" ); $currDiv .css( "background-color", "red" ); }); Please Check Above Example for Next and Prev if button will not work then Copy this html in Editor and Download Js from Cdn then Apply your local Js Path and Again run it I hope it will work for you.... Thanks

Hide and show multiple div with a single button click ?

Answers (3)