Question

I am having difficulties running an .each function to toggle a div on/off when a link outside of it is clicked. The function works, except I want it work for several different divs (right now, missiondiv and visiondiv). So I’ve created a variable prefix, which finds the id of a span and runs the function with this as the prefix. (Sorry if that doesn’t make sense). My script works only for the first span id. http://jsfiddle.net/jessica_b/KMJPf/

HTML for the link:

<div id="whoweare">
<span id="mission"><a href='#'>Mission</a></span></br>
<span id="vision"><a href='#'>Vision</a></span></br>
</div>

HTML for the div:

<div id="missiondiv" class="closed">Mission item</div>
<div id="visiondiv" class="closed">Vision item</div>

Javascript function:

    $.each($("#whoweare").find("span").attr("id"), function(){
    var prefix = $("#whoweare").find("span").attr("id");
    $('#' + prefix + ' a').click(function() {
        $('#' + prefix + 'div').toggleClass("closed");
        $('#' + prefix + 'div').toggleClass("item block");
        $(this).toggleClass('active-page');
        $container.isotope('reLayout');
    });
});

It runs within an Isotope, but all of that is working. The error resides in the above script and I’m not proficient enough in jQuery to be able to diagnose my mistakes yet! Thanks!

Answer 1

$('#whoweare span a').each(function(index, element) {
    $(element).click(function() {
        var prefix = $(this).parent('span').attr('id');
        $('#' + prefix + 'div').toggleClass("closed");
        // other actions
       return false;
    });
});​

http://jsfiddle.net/MtX7p/16/

OR

$('#whoweare span').each(function(index, element) {
    $(element).find('a').click(function() {
        var prefix = $(element).attr('id');
        $('#' + prefix + 'div').toggleClass("closed");
        // other actions
       return false;
    });
});​

http://jsfiddle.net/MtX7p/17/

This is your full script: http://jsfiddle.net/KMJPf/49/