Question

I basically have multiple divs that contain information for different words (word, definition, ect.) all on one page. So each “word card” is written as the following (I took out some of the extra stuff):

<div id="card">
    <div class="card-info-box" id="definition" wordID="1">To lessen or get rid of any pain or suffering.</div>
    <a href="#" class="definition" wordID="1">Define</a> 
</div> 

I added a custom attribute of “wordID” to each word. I am trying to use jQuery to create a “Define” link that toggles the appropriate #definition div. So far, I have the following jQuery code:

    $(document).ready(function() {
    $('#definition').hide();
    $(".definition").click(function(evt) {
        var d = $(this).attr("wordID");
        $("#definition[wordID=" + d + "], #definition[wordID=" + d + "]").toggle();
    }); 
});

Now with just one one card on a page, the jQuery works fine with toggling it’s respective definition div. However, if I duplicate the card div and change the wordID to 2 on the second set, the second div’s definition link does not do anything. The first one still works as it’s supposed to.

Is there something I need to change so that the jQuery works correctly for each wordID attribute value?

Thanks!

Answer 1

Try below. You don’t need use attribute selector, you could use $(this).siblings('.card-info-box') to select the div you want to toggle.

$(".definition").click(function(evt) {
    evt.preventDefault();
    $(this).siblings('.card-info-box').toggle();
});