jQuery substitute for multiple hovers

Question

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>

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

Tats_innit · Accepted Answer · 2012-07-24 03:31:17Z

6

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

});

answered Jul 24, 2012 at 3:31

Tats_innit

1762 bronze badges

\$\begingroup\$ @Cameron No worries! Glad it helped :) \$\endgroup\$
– Tats_innit
Jul 24, 2012 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, 2012 at 3:40
\$\begingroup\$ @ExceptionLimeCat :) read this - api.jquery.com/multiple-selector it might help you to understand more, \$\endgroup\$
– Tats_innit
Jul 24, 2012 at 3:42

Add a comment |

ExceptionLimeCat · Accepted Answer · 2012-07-24 03:31:25Z

2

Use classes instead of id's

 $('.question').hover(
    function () {
        $(this).find('.answer').slideDown('fast');
    }, 
    function () {
        $(this).find('.answer').slideUp('fast');
    }
);

answered Jul 24, 2012 at 3:31

ExceptionLimeCat

1212 bronze badges

\$\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, 2012 at 3:33
\$\begingroup\$ Missing the $(this).find('.answer') context \$\endgroup\$
– Wex
Jul 24, 2012 at 3:34
\$\begingroup\$ Awww.... I see. will edit. \$\endgroup\$
– ExceptionLimeCat
Jul 24, 2012 at 3:34
\$\begingroup\$ I tried that, but it slides them all down and up, but thanks \$\endgroup\$
– Cameron
Jul 24, 2012 at 3:36
\$\begingroup\$ Just edited. this should work. \$\endgroup\$
– ExceptionLimeCat
Jul 24, 2012 at 3:37

Add a comment |

keyur at codebins.comkeyur at codebins.com · Accepted Answer · 2012-07-24 07:40:56Z

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

Stack Exchange Network

jQuery substitute for multiple hovers

3 Answers 3

Your Answer

Hot Network Questions

jQuery substitute for multiple hovers

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions