Jquery hide/show multiple divs using the same button

Question

I am doing some sort of dynamic quiz using jquery. I am currently stuck at hiding/showing the divs using the same button. So, for example, I have this in html:

<div id="div1" class="question">
<div id="div2" class="question">
<div id="div3" class="question">
<div id="div4" class="question">
<div id="div5" class="question">

<button type="button" onclick="GetSelectedItem()" id="next">Next</button>

This is the jquery part:

$(document).ready(function (){

$('#div2, #div3, #div4, #div5').hide();
$('#next').click(function(){
     //code
});
});

Using the '#next' button I would like to go through every div, so when I press it it will hide the previous div and show the next one and so on. Could anyone point me in the right direction? Thanks

Matt Burland · Accepted Answer · 2013-03-18 15:49:25Z

3

You could try something like this (assuming all your questions have a class of question and nothing else does):

$('#next').click(function(){
    var curr = $(".question:visible");
    curr.next(".question").show();
    curr.hide();
});

See here

Note you can check the value returned by next() to handle the end of your quiz.

Here's an example that disables the next button when you get to the last question.

edited Mar 18, 2013 at 15:49

answered Mar 18, 2013 at 15:41

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcio Barroso Over a year ago

Is amazing how much ways we can solve a problem using jQuery \o/

Lowkase · Accepted Answer · 2013-03-18 15:39:02Z

2

First off you had errors in your HTML, you weren't closing the divs

This should start you out:

http://jsfiddle.net/crZ69/

HTML

<div id="div1" class="question">q1</div>
<div id="div2" class="question">q2</div>
<div id="div3" class="question">q3</div>
<div id="div4" class="question">q4</div>
<div id="div5" class="question">q5</div>

<button type="button" onclick="GetSelectedItem()" id="next">Next</button>

JQUERY

var qCount = 1;

$('.question').hide();

$('#next').click(function(){
    $('.question').hide();
    $('#div' + qCount).show() ;   
    qCount = qCount + 1;

    if(qCount == 6){ qCount = 1;}
});

answered Mar 18, 2013 at 15:39

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

Comments

j08691 · Accepted Answer · 2013-03-18 15:39:08Z

2

You can create an index to keep track of the open div and increment it when you click the button, hiding all the divs and then only showing the "next" one.

$('#div2, #div3, #div4, #div5').hide();
var idx = 0;
$('#next').click(function () {
    idx++;
    if (idx < $('.question').length) $('.question').hide();
    $('.question').eq(idx).show();
});

jsFiddle example

answered Mar 18, 2013 at 15:39

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Alistair Findlay · Accepted Answer · 2013-03-18 15:45:52Z

This uses a current CSS class to keep track of the current question for visibility purposes and tidies up the HTML a bit to use unobtrustive Javascript - http://jsfiddle.net/ZqTsv/

HTML:

<div id="div1" class="question current">Question 1</div>
<div id="div2" class="question">Question 2</div>
<div id="div3" class="question">Question 3</div>
<div id="div4" class="question">Question 4</div>
<div id="div5" class="question">Question 5</div>

<button type="button" id="next">Next</button>

CSS:

.question {
    display: none;
}

.question.current {
    display: block;
}

jQuery:

$("#next").click(function () {
    if ($(".current").next(".question").length) {
       $(".current").removeClass("current").next(".question").addClass("current");     
    }    
});

mindandmedia · Accepted Answer · 2013-03-18 16:12:30Z

0

it's amazing how many different solutions different people come up with. here is mine:

First fix your html, so the divs have content.

This is the javascript I propose:

var idx = 0;
$(document).ready(function (){
    var qs = $('.question');
    qs.hide();
    qs.first().show();
    $('#next').click(function(){
       idx++;
       if( idx >= qs.length ) idx = 0;
       qs.hide();
       qs.eq(idx).show();
    });
});

Fiddle

answered Mar 18, 2013 at 16:12

mindandmedia

6,8551 gold badge26 silver badges33 bronze badges

Comments

Marcio Barroso · Accepted Answer · 2013-03-18 16:16:52Z

0

I did something

I think it will be usefull to you =)

answered Mar 18, 2013 at 16:16

Marcio Barroso

8031 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery hide/show multiple divs using the same button

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related