jquery - Toggle same table-row with 2 different toggle functions -


i attempting toggle details row via 2 different sources.

  1. if user clicks on either name or addressalert, specific detail row gets shown or hidden
  2. 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

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -