Member Avatar for genzoman

I have an array of links that when clicked will show a corresponding hidden div element. Every link has it's own div. I'm trying to use an image to close each div as well (which isn't working yet). More importantly, when I click on the first and second links, two boxes appear as they should. However, when I click on the close link, the opposite div closes. So if I have div one and two open and click on div two, one actually closes. any help is appreciated!

<!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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>




<style type="text/css">
.county{
    color:blue;
    display:block;

}
.countystats{
    background-image:url('../../../../../closelabel.png') ;
    background-position:top right;
    border:3px black inset;
    background-repeat:no-repeat;
    background-color:#ccc;
    display:none;
    right:250px;
    margin: 5px 5px 5px 5px;
    padding:5px 5px 5px 5px;
    width:200px;

}
</style>

</head>

<body>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black;  overflow-x:hidden;">

    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
    <a class="county" href="#">three</a>
    <a class="county" href="#">four </a>
    <a class="county" href="#">five</a>
    <a class="county" href="#">six</a>



</div>
<div class="countystats">stats one<p>woot</p><a  class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv"  href="#">a</a></div>

<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>


<script type="text/javascript">
$('a.county').each( function(e){
        $(this).bind('click', function(e){
            var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250); 
            });


   });
</script>
<script type="text/javascript">
$('a.closediv').each( function(e){
        $(this).bind('click', function(e){
            var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250); 
            });


   });


</script>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 190 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Genzoman, try:

$('a.closediv').each( function(e){
	$(this).bind('click', function(e){
		$(this).closest("div.countystats").hide(250); 
		return false;
	});
});

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.