jQuery simple survey infrastructure

Question

I am currently constructing an online survey which consist of 10-11 questions. I am looking for a simple jQuery structure which I can slideUp() and slideDown each question .. my survey has the basic structure below

<div class="question">
  Question 1 ....
</div>

<div class="question noshow">
  Question 2 goes here .... 
</div> 

I am thinkin about using jQuery command like the following:

$('document').ready(function() {
  $('.nextbutton').click(function() {
     $('.question').slideUp()
     $('.question').next().slideDown() 
  });

  $('.prevbutton').click(function() {
     $('.question').slideUp()
     $('.question').prev().slideDown()
  });
});

I am quite new to jQuery and I think i'm stuck at the logic. Please help me through the logic on how to construct a simple infrastructure for the survey.

Thank you!

Answer 1

You can use one of these guide to create an accordion:

http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

if you want something hand coded in 2 min I can create a Fiddle for you.

---

Edit:

Here a custom Accordion: JSFIDDLE

---

The code:

HTML

<div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
</div>​

jQuery

$('.question a').click(function(e) {
   $('.question').find('.open').slideUp().removeClass('open');
   $(this).siblings('p').slideDown().addClass('open');
    e.preventDefault();        
});​

a bit of CSS:

.question {border: 1px solid #e4e4e4; padding:10px;}
.question p {display: none;}