jquery - Toggle same table-row with 2 different toggle functions -
i attempting toggle details row via 2 different sources.
- if user clicks on either name or addressalert, specific detail row gets shown or hidden
- if user clicks on "toggle all" details rows shown or hidden.
the issue 2 separate toggle functions don't know other 1 to. so, example, if "toggle all" clicked, , details rows shown, clicking on individual name should hide details row. however, since individual toggle function "show", takes 2 clicks hide details 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 , hiding details specific row $( function(){ //if click on carrier name or address alert symbol $('.name, .addressalert').toggle( function() { //gets row clicked on, , finds next row (the details row) detailstds = $(this).parents("tr.inforow").next(); //adds "shown" class, sets display table-row detailstds.addclass("shown"); }, function(){ //gets row clicked on, , finds next row (the details row) detailstds = $(this).parents("tr.inforow").next(); //removes "shown" class, thereby setting display none detailstds.removeclass("shown"); } ); } ); //toggle details $( function(){ //if click on carrier name or address alert symbol $('#toggleall').toggle( function() { $('.details').addclass("shown"); $('#toggleall').text('[-] hide addresses'); }, function(){ $('.details').removeclass("shown"); $('#toggleall').text('[+] show addresses'); } ); } );
you use click() instead of toggle(), show or hide based on class applied row.
Comments
Post a Comment