How to use jquery to create a “navigation” to hide and show content on the same page?

Question

Desired situation : All the quiz content is hidden from the start and I have a ul list with li items as my "quiz questions navigations" which is supposed to show 1 quiz question (with the radio btns choices and the div resp) at a time when the "questions navigation is clicked.

Current situation : I was thinking of having an array to check for the same attr name "qns1", but I am not familiar with JavaScript syntax

Javascript

$(".span9").hide();

HTML

<ul class="quiznav">
     <li>Q1</li><br>
     <li>Q2</li><br>
     <li>Q3</li><br>
</ul>

<div class="span9">

        <div class="qnstitle" name="qns1">Q1. Lorem ipsum dolor sit amet</div>
        <label class="radio">
            <input name="qns1" class="radioBtn" type="radio" value="A">a) asdf
        </label>
        <div class="resp" data-qns="qns1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet ligula mi. Aenean eu magna quam. In ultrices nisi non tellus molestie ut mattis turpis convallis. </p>
        </div>

        <label class="radio">
            <input name="qns1" class="radioBtn" type="radio" value="B">b) bsdf
        </label>
        <div class="resp" data-qns="qns1">
            <p>Proin porta, ante eu feugiat facilisis, nulla erat porta dui, sed pellentesque orci sapien quis libero. Nam nec nibh metus, nec luctus massa.</p>
        </div>

        <label class="radio">
            <input name="qns1" class="radioBtn" type="radio" value="C">c) csdf
        </label>
        <div class="resp" data-qns="qns1">
            <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem. Fusce ut metus a dui egestas congue quis quis augue. Suspendisse sed nunc sed nulla volutpat pharetra at vel purus.</p>
        </div>

        <br>

        <div class="qnstitle" name="qns2">Q2. Nunc sed aliquet enim.</div>
        <label class="radio">
            <input name="qns2" class="radioBtn" type="radio" value="A">a) azzzddsaf
        </label>
        <div class="resp" data-qns="qns2">
            <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p>
        </div>

        <label class="radio">
            <input name="qns2" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf
        </label>
        <div class="resp" data-qns="qns2">
            <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p>
        </div>

        <label class="radio">
            <input name="qns2" class="radioBtn" type="radio" value="C">c) czzdfasdf
        </label>
        <div class="resp" data-qns="qns2">
            <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p>
        </div>

<div class="qnstitle" name="qns3">Q3. Nunc sed aliquet enim.</div>
        <label class="radio">
            <input name="qns3" class="radioBtn" type="radio" value="A">a) azzzddsaf
        </label>
        <div class="resp" data-qns="qns3">
            <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p>
        </div>

        <label class="radio">
            <input name="qns3" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf
        </label>
        <div class="resp" data-qns="qns3">
            <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p>
        </div>

        <label class="radio">
            <input name="qns3" class="radioBtn" type="radio" value="C">c) czzdfasdf
        </label>
        <div class="resp" data-qns="qns3">
            <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p>
        </div>
    </div><!-- end of span9 -->

Answer 1

Yes wrapping each question in a div is necessary. This may be the effect you are looking for, fading out of current and fading in the new question based on click event of the navigation. The API .delay() was used to ease transition of the question.

$(".btn").click(function(){    
    $('.qns').fadeOut();
    $('#qns' + $(this).html()).delay(450).fadeIn(); 
});

See example here JSFIDDLE

Answer 2

You should first wrap your each question in div then you can use jQuery toggle() to show and hide the question based on click event of the question navigation.

$(".btn").click(function(){
    $("#" + $(this).text()).toggle("fast");
});​

See example here FIDDLE .