Hide and show multiple div with a single button click ?

Gurpreet Arora

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();
}
});

JavaScript is the programming language of HTML and the Web.

Programming makes computers do what you want them to do.

JavaScript is easy to learn.

hello

link

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Metta Chittibabu8y ago
one
two
three
four

$(".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.
0

Datta Sai Krishna8y ago

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 Thakkar8y ago

jQuery previous sibling example

div1

div2

div3

div4

div5

div6

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

-1