Question

Swap div content from the same text link

That post has almost what i need to answer my question. It works fine for two DIVs, what if I have quite a few. How would you change the function without having to keep adding declaration lines for more variables?

Answer 1

If you can use jQuery, you could try something like this: http://jsfiddle.net/k9JC4/6/

Html:

<a class="que">Question 1</a>
<div class="ans">
    Answer 1
</div>
<a class='que'>Question 2</a>
<div class='ans'>
    Answer 2
</div>
<a class='que'>Question 3</a>
<div class='ans'>
    Answer 3
</div>

Css:

.ans
{
    display: none;
}

a
{
    display: block;
    color: blue;
}

Js:

$(function(){
    $('.que').click(function(ev){
        ev.preventDefault();

        $('.ans').hide();
        $(this).next('.ans').show();
    });
});

How this works is that when you click on a link with the class .que jQuery will find the next sibling element with the class .ans. It will hide all other .ans class members then show the sibling found.