Javascript ASK: jquery – How to bind single functionality for multiple div id

Tuesday, December 4, 2012

jquery – How to bind single functionality for multiple div id

I want to use tool tip for large number of lists

I wrote a jquery for every div, but i dont know to bind a functionality for multiple div items

Here is the link

http://masterssoftware.in/tool_tip2.html

and below the mentioned code


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\" type=\"text/javascript\"></script>
<script>
$(document).ready(function(){
    $(\"#a1_down\").hover(function(){
        $(\"#tip1_down\").toggle();
        });

    $(\"#a2_down\").hover(function(){
        $(\"#tip2_down\").toggle();
        }); 

        $(\"#a3_down\").hover(function(){
        $(\"#tip3_down\").toggle();
        }); 


    });

</script>
<style>
body{ background:#690;}
.tip{ width:500px; height:100px; padding:10px; background:#CFF; display:none; overflow:hidden; border-radius:5px 5px 5px 5px; z-index:200; position:absolute;}
.tip h4{ display:block; font-size:18px; text-transform:uppercase;}
.tip p{ font-size:14px;}
</style>
</head>

<body>
<ul>
   <li><a id=\"a1_down\" href=\"#\">aaaaaaaaaaa</a></li>
<div id=\"tip1_down\" class=\"tip\"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>

<li><a id=\"a2_down\" href=\"#\">aaaaaaaaaaa</a></li>
<div id=\"tip2_down\" class=\"tip\"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>
<li><a id=\"a3_down\" href=\"#\">aaaaaaaaaaa</a></li>
<div id=\"tip3_down\" class=\"tip\"> <h4>content of aaaaaaaa aaaaaaaaaaaaaa </h4>
 <p>content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa content of aaaaaaaa aaaaaaaaaaaaaa</p>
</div>
</ul>
</body>
</html>