Jquery fadeout & replace div

Question

I'm trying to make a question page, where once a choice is clicked. the current question fades out & is replaced with the new question & set of answers.

I've pretty much got what I'm going for, except I'm wanting a more efficient way for the questions to change, rather than writing out functions for every single question. Perhaps something that uses .this? Just a little stuck =\

Cheers!

HTML

<div class="content" id="question1">
<div class="question-wrap">
    <h2>This is a Question1</h2>
</div>
<div class="choice-wrap">
<table class="choice-table">
    <tr>
    <td class="choice">choice1</td>
    <td class="choice">choice2</td>
    <td class="choice">choice3</td>
    <td class="choice">choice4</td>
    </tr>
</table>
</div>
</div>
<div class="content" id="question2">
<div class="question-wrap">
    <h2>This is a Question2</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>
<div class="content" id="question3">
<div class="question-wrap">
    <h2>This is a Question3</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>

CSS

.content    {
width: 1024px;
margin: auto;
text-align: center;
padding: 25px;
}

.choice-wrap    {
margin-top: 50px;
}

.choice-table   {
margin: auto;
}

.choice    {
background: #666;
padding: 25px;
cursor: pointer;
border-radius: 999px
}

#question2  {
display: none;
}

#question3  {
    display: none;
}

jQuery

$(document).ready(function(){
  $('.choice').click(function (){
$('#question1').fadeOut(1000, function(){
  $('#question2').fadeIn(1000);
  });
});

Thanks!

Answer 1

in case you don't have only 3 questions, this fiddle will do the thing you want for any number of questions (for example 5 questions).

jquery :

$(document).ready(function(){
    $('div.content:first-child').fadeIn();
    $('.choice').click(function (){
        var $thisParent = $(this).closest('div.content');
        $thisParent.fadeOut(1000, function(){
            $thisParent.next('.content').fadeIn();
        });
    });
});

note that the CSS is changed as well.

EDIT: to show something after the last question, you can use this updated fiddle

Answer 2

You missed the closing brackets

$(document).ready(function(){
    var count = 0,
    iQuestionsLen = $('.content').length; //Total quesitons length

    $('.choice').click(function (){
    $('.content').eq(count).fadeOut(1000, function(){
    count += 1;

    if (iQuestionsLen == count) {
        count = 0;
        //OP logic at last question
    }        
    $('.content').eq(count).fadeIn(1000);
  });

});
});

Check this link http://jsfiddle.net/aeaUJ/6/

Answer 3

Just a modification, use parents().find

$(document).ready(function(){
   var count = 0;
   $('.choice').click(function (){
       $(this).parents().find('.content').eq(count).fadeOut(1000, function(){      
       count++;
       $(this).parents().find('.content').eq(count).fadeIn(1000);
      });
   });
});

Answer 4

You should look into the next() function provided by jQuery. Your questions are sibling nodes, therefore invoking the next() function would get the next question.

Like this: http://jsfiddle.net/aeaUJ/11/

$(document).ready(function () {
    $('div.content').on('click', '.choice', function () {
        var $this = $(this), // your choice
            question = $this.closest('div.content');
        console.log( $this.text() + ' was chosen for ' + question.attr('id') );
        question.fadeOut(function(){
            question.next().fadeIn();
        });
    });
});