Question

I have an array of links that when clicked will bring up a hidden div with information related to it. Each link, when clicked, will bring up a different div associated with it. I’m trying to make an image (closelabel.png) on every div with the class ‘countystats’ act as a close button to hide the divs. I can’t get the image in every div to act as a clickable link yet. More importantly, when I click on link one nothing happens. When I open up two hidden divs and try to close one, the opposite one closes (if I click on ‘one’ and ‘two’ to make the divs appear, and then I lick on the “a” (for purposes of a closing link) the opposite div is closed. So the button for two closes one.

<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>

---

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

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

jsfiddle demo

Answer 1

Your problem is a bit of confusion about what this is in the click handler in here:

$('a.closediv').each( function(e){
    $(this).bind('click', function(e){
        var toClose = $(this).index();
        $('.countystats').eq(toClose).hide(250); 
    });
});

You’re calling index on the <a> that you’re using to hide the <div> rather than on the <div> itself.

The simplest solution is, as other people have noted, to use closest:

$('a.closediv').click(function(e) {
    $(this).closest('.countystats').hide(250);
});

No one else noticed what the real root of your problem was so I thought I’d mention it.