Question

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

Answer 1

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