1
\$\begingroup\$

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:

<html>
<head>
<style type="text/css">
* {
    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;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(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');
        }
    );
});
</script>
</head>
<body>
<div id="container">
    <div class="q_container" id="qc1">
        <div class="question">
            What is a question?
        </div>
        <div class="answer" id="a1">
            It is a way to discover something.
        </div>
    </div>
    <div style="width:300px;height:10px;"></div>

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

    <div class="q_container" id="qc3">
        <div class="question">
            What is a question3?
        </div>
        <div class="answer" id="a3">
            It is a way to discover something3.
        </div>
    </div>
</div>
</body>
</head>
\$\endgroup\$

migrated from stackoverflow.com Jul 24 '12 at 11:58

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ Do you want the answer to open when clicked or hovered? \$\endgroup\$ – Inkbug Jul 24 '12 at 12:55
6
\$\begingroup\$

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');
        }
    );

});​
\$\endgroup\$
  • \$\begingroup\$ @Cameron No worries! Glad it helped :) \$\endgroup\$ – Tats_innit Jul 24 '12 at 3:37
  • \$\begingroup\$ I never knew about the , separator on multiple id's. Hate to upvote a competing answer but its just so damn helpful. \$\endgroup\$ – ExceptionLimeCat Jul 24 '12 at 3:40
  • \$\begingroup\$ @ExceptionLimeCat :) read this - api.jquery.com/multiple-selector it might help you to understand more, \$\endgroup\$ – Tats_innit Jul 24 '12 at 3:42
2
\$\begingroup\$

Use classes instead of id's

 $('.question').hover(
    function () {
        $(this).find('.answer').slideDown('fast');
    }, 
    function () {
        $(this).find('.answer').slideUp('fast');
    }
);
\$\endgroup\$
  • \$\begingroup\$ Just so that you know :) this will have a buggy effect (i.e. it will slide all the answers see here: jsfiddle.net/bBAXp) you can try this cod ein my demo. Just letting you know. \$\endgroup\$ – Tats_innit Jul 24 '12 at 3:33
  • \$\begingroup\$ Missing the $(this).find('.answer') context \$\endgroup\$ – Wex Jul 24 '12 at 3:34
  • \$\begingroup\$ Awww.... I see. will edit. \$\endgroup\$ – ExceptionLimeCat Jul 24 '12 at 3:34
  • \$\begingroup\$ I tried that, but it slides them all down and up, but thanks \$\endgroup\$ – Cameron Jul 24 '12 at 3:36
  • \$\begingroup\$ Just edited. this should work. \$\endgroup\$ – ExceptionLimeCat Jul 24 '12 at 3:37
0
\$\begingroup\$

I have done complete bins demo for above issue. you can check demo link.

DEMO: http://codebins.com/bin/4ldqp9t

HTML:

<div id="container">
  <div class="q_container" id="qc1">
    <div class="question">
      What is a question?
    </div>
    <div class="answer" id="a1">
      It is a way to discover something.
    </div>
  </div>
  <div style="width:300px;height:10px;">
  </div>

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

  <div class="q_container" id="qc3">
    <div class="question">
      What is a question3?
    </div>
    <div class="answer" id="a3">
      It is a way to discover something3.
    </div>
  </div>
</div>

CSS Styles:

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: #fc2244;
    padding: 4px;
}
.answer {
    border-radius: 0px 0px 5px 5px;
    width:300px;
    height:100px;
    display:none;
    background-color: #4477cc;
    overflow: hidden;
    padding: 4px;
}

JQuery

$(document).ready(function() {
    $(".question").hover(function(e) {
        e.preventDefault();
        $(this).closest(".q_container").find(".answer").slideDown('fast');
        /*
      //Another Alternate way is:
       $(this).parent().find(".answer") .slideDown('fast'); 
      */
    }, function(e) {

        e.preventDefault();
        $(this).closest(".q_container").find(".answer").slideUp('fast');

        /*
      //Another Alternate way is:
       $(this).parent().find(".answer") .slideUp('fast'); 
      */
    });
});

DEMO: http://codebins.com/bin/4ldqp9t

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy