Toggle same table-row with 2 different toggle functions

I am attempting to toggle a details row via two different sources.

1. If the user clicks on either the Name or the AddressAlert, then that specific detail row gets shown or hidden
2. If the user clicks on "toggle all" then ALL the details rows get shown or hidden.

The issue is that the two separate toggle functions don't know what the other one is up to. So, for example, if the "toggle all" was just clicked, and now all the details rows are shown, clicking on an individual Name should hide that details row. However, since the individual toggle function is up to "show", it takes 2 clicks to hide the details for that row.

the HTML:

<div id="toggleAll"></div>
<table>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
</table>

The javascript:

//toggles beween showing and hiding the details for specific row
$(
    function(){
        //if click on carrier name or address alert symbol
        $('.name, .addressAlert').toggle(
            function() {
            //gets the row clicked on, and finds the next row (the details row)
            detailsTds = $(this).parents("tr.infoRow").next();
            //adds the "shown" class, which sets the display to table-row
       开发者_开发技巧     detailsTds.addClass("shown");
            },
            function(){
            //gets the row clicked on, and finds the next row (the details row)
            detailsTds = $(this).parents("tr.infoRow").next();
            //removes the "shown" class, thereby setting the display to none
            detailsTds.removeClass("shown");
            }
        );  
    }
);

//toggle ALL details 
$(
    function(){
        //if click on carrier name or address alert symbol
        $('#toggleAll').toggle(
            function() {
            $('.details').addClass("shown");
            $('#toggleAll').text('[-] Hide all addresses');
            },
            function(){
            $('.details').removeClass("shown");
            $('#toggleAll').text('[+] Show all addresses');
            }
        );  
    }
);

You could use click() instead of toggle(), then show or hide based on the class that is currently applied to the row.

Could you reference directly to the class?

why don't you replace the functions in the first toggle: "$('.name, .addressAlert').toggle"

and then initialize all the infoRows with shown class- so the first time it will be pressed it will be shown, even if the user pressed the "toggle ALL"