Question

ok, so I have a structure like two divs. On the left side div I have a list of 10 questions, and on the right hand side I want to populate the answers for the same. On clicking the question1 on the left hand side the answer should display in the right hand side. On clicking the second question the answer for second should display, hiding all the answers. so what would be the ideal way to do it in jquery.
I wrote something like;

$("document").ready(function() {
   $("#idQ1").click(function() {
     $("#ansQ1").css("display","block");
    $("#ansQ1,#ansQ2,#ansQ3,#ansQ4,#ansQ5,.......#ansQ10").css("display","none");
})
}) 

but I dont think this code is good. can somebody guide as to how you would do this using loops or functions

Answer 1

The other answers are dead on with using classes to write an efficient script for this

I’ve created my own example here that uses anchor tags for the questions with an href set to the id of an answer element.

example here: http://jsfiddle.net/pxfunc/zEwUB/

HTML:

<div id="container">
    <div id="questions">
        <a href="#answer1">Question 1?</a>
        <a href="#answer2">Question 2?</a>
        <a href="#answer3">Question 3?</a>
    </div>
    <div id="answers">
        <p id="defaultText">Click a question to show the answer here!</p>
        <p id="answer1" class="answer">Answer 1!</p>
        <p id="answer2" class="answer">Answer 2!</p>
        <p id="answer3" class="answer">Answer 3!</p>
    </div>
</div>

jQuery:

$('#questions a').click(function(e) {
    e.preventDefault(); // prevents the link from changing the URL

    $('#answers p').hide(); // hide all answers
    $($(this).attr('href')).show(); // get href attribute to show answer
});