jQuery substitute for multiple hovers I would like to find a more efficienct way to use jQuery for my question and answer page.

Here is the code which I want to change. If a .q_container is clicked, I want its corresponding answer div will slide down.

$(document).ready(function() {
    $('#qc1').hover(
        function () {
            $('#a1').slideDown('fast');
        }, 
        function () {
            $('#a1').slideUp('fast');
        }
    );
    $("#qc2").hover(
        function () {
            $('#a2').slideDown('fast');
        }, 
        function () {
            $('#a2').slideUp('fast');
        }
    );
    $("#qc3").hover(
        function () {
            $('#a3').slideDown('fast');
        }, 
        function () {
            $('#a3').slideUp('fast');
        }
    );
});


All of my Code:

&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
* {
    padding: 0px;
    margin: 0px;
}
body {
    background-color: black;
}
#container {
    width:1000px;
    min-height: 500px;
    background-color: #3b3b3b;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}
.q_container {
    width:300px;
}
.question {
    border-radius: 5px 5px 0px 0px;
    width:300px;
    height:30px;
    background-color: red;
    padding: 4px;
}
.answer {
    border-radius: 0px 0px 5px 5px;
    width:300px;
    height:100px;
    display:none;
    background-color: blue;
    overflow: hidden;
    padding: 4px;
}
&lt;/style&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $('#qc1').hover(
        function () {
            $('#a1').slideDown('fast');
        }, 
        function () {
            $('#a1').slideUp('fast');
        }
    );
    $("#qc2").hover(
        function () {
            $('#a2').slideDown('fast');
        }, 
        function () {
            $('#a2').slideUp('fast');
        }
    );
    $("#qc3").hover(
        function () {
            $('#a3').slideDown('fast');
        }, 
        function () {
            $('#a3').slideUp('fast');
        }
    );
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
    &lt;div class="q_container" id="qc1"&gt;
        &lt;div class="question"&gt;
            What is a question?
        &lt;/div&gt;
        &lt;div class="answer" id="a1"&gt;
            It is a way to discover something.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="width:300px;height:10px;"&gt;&lt;/div&gt;

    &lt;div class="q_container" id="qc2"&gt;
        &lt;div class="question"&gt;
            What is a question2?
        &lt;/div&gt;
        &lt;div class="answer" id="a2"&gt;
            It is a way to discover something2.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="width:300px;height:10px;"&gt;&lt;/div&gt;

    &lt;div class="q_container" id="qc3"&gt;
        &lt;div class="question"&gt;
            What is a question3?
        &lt;/div&gt;
        &lt;div class="answer" id="a3"&gt;
            It is a way to discover something3.
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/head&gt;
Working Demo http://jsfiddle.net/jEjYp/2/

Rest feel free to play around with the code or demo.

Hope it fits your cause. :)

code

$(document).ready(function() {
    $('#qc1,#qc2,#qc3').hover(
        function () {
            $(this).find('.answer').slideDown('fast');
        }, 
        function () {
            $(this).find('.answer').slideUp('fast');
        }
    );

});​