jQuery - Show content if Yes, redirect if No?

Someone showed me a mockup today of a page. The idea is that visitors to the page would see a box with a question and 'Yes' and 'No' buttons.

If they clicked 'Yes' to that question, the next section would show up with another question and two more buttons for 'Yes' and 'No'.

Clicking 'Yes' would show the visitor the third and final section.

However, if they clicked 'No' in response to the first two questions, the idea is that they would either see another section, or be redirected to another page.

I believe this is p开发者_如何学Cossible with jQuery and have looked briefly at toggle() and scrollTo - the latter seems promising - but was wondering if anyone had any suggestions about how best to approach this?

Thanks in advance!

---

I did something similar to this in the past. One thing I did was that I implemented it as more of a "routing" system, where the first item doesn't know the last, it only knows what comes after it.

Consider these elements:

<div id="req1" data-yes="#req2" data-no="#reqno">
   Do you do stuff?
   <button class="yes">Yes</button>
   <button class="no">No</button>
</div>

<div id="req2" data-yes="#req3" data-no="#req1">
   <!-- content here... -->
</div>

<div id="req3" data-yes="#done" data-no="">
   <!-- content here... -->
</div>

... and so on

You could then write some generic jQuery to use data encoded onto the tag to know the processing/order of the flow. The value of data-yes and data-no is a selector to the next element of the workflow.

The code would use these generically. Something to the effect of...

$('div[data-yes]').each(function() {
    var container = $(this);
    // Bind "YES"
    container.find('button.yes').click(function() {
        var next = $(container.attr('data-yes'));
        next.fadeIn();
        container.fadeOut();
    });
    // Bind "NO"
    container.find('button.no').click(function() {
        var next = $(container.attr('data-no'));
        next.fadeIn();
        container.fadeOut();
    });
});

---

Try this:

$(".box .yes").click(function(e){
    $(this).closest(".box").hide().next().show();
});
$(".box .no").click(function(e){
    location.href = "/someredirecturl.htm";
});

Your markup would look something like:

<div class="box">
    Question blah blah ... ?
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>
<div class="box">
    Question blah blah ... ?
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>
<div class="box">
    Final content
</div>

Working demo: http://jsfiddle.net/LJ5Ha/