how to toggle hide show a table onClick of a tag in java script

Question

I want to show and hide  toggle  the  lt table gt  onClick event of the  lt a gt   this is my  lt a gt  tag   lt a id  loginLink  onclick  toggleTable true    href     gt Login lt  a gt    here is my java script function toggleTable hide        lt script gt      function toggleTable hide            if  hide           document getElementById  loginTable   style display  table          document getElementById  loginLink   onclick   toggleTable false          else          document getElementById  loginTable   style display  none          document getElementById  loginLink   onclick   toggleTable true                  lt  script gt    and here is my  lt table gt  tag   lt table id  loginTable  border  1  align  center  style  display none  gt    1st time when I click the  lt a gt  link it shows my table  but not hiding back when i click it next time  what i m doing wrong

User · Answer

inside your function toggleTable when you do this line  document getElementById  loginLink   onclick   toggleTable        you are actually calling the function again  so toggleTable gets called again  and again and again  you re falling in an infinite recursive call   make it simple   function toggleTable          var elem document getElementById  loginTable         var hide   elem style display    none        if  hide             elem style display  table              else          elem style display  none             see this fiddle

User · Answer

Your anchor tag should be      lt a id  loginLink  onclick  showHideTable     href     gt Login lt  a gt    And You javascript function    function showHideTable        if  document getElementById  loginTable   style display     none             document getElementById  loginTable   style display           else         document getElementById  loginTable   style display  none

User · Answer

You are trying to alter the behaviour of onclick inside the same function call  Try it like this   Anchor tag   lt a id  loginLink  onclick  toggleTable     href     gt Login lt  a gt    JavaScript  function toggleTable         var lTable   document getElementById  loginTable        lTable style display    lTable style display     table      none     table

User · Answer

You need to modify your function as    function toggleTable        if  document getElementById  loginTable   style display     table             document getElementById  loginTable   style display  none         else         document getElementById  loginTable   style display  table        currently it is checking based on the boolean parameter  you don t have to pass the parameter with your function    You need to modify your anchor tag as    lt a id  loginLink  onclick  toggleTable     href     gt Login lt  a gt

User · Answer

You are always passing in true to the toggleMethod  so it will always  show  the table  I would create a global variable that you can flip inside the toggle method instead   Alternatively you can check the visibility state of the table instead of an explicit variable

User · Answer

Try   lt script gt    function toggleTable              var status   document getElementById  loginTable   style display       if  status     block           document getElementById  loginTable   style display  none         else         document getElementById  loginTable   style display  block              lt  script gt

User · Answer

Simple using jquery   lt script gt    document  ready function             loginLink   click function             loginTable   toggle  slow                lt  script gt

User · Answer

visibility property makes the element visible or invisible    function showTable        document getElementById  table   style visibility    visible     function hideTable        document getElementById  table   style visibility    hidden

[javascript] how to toggle (hide/show) a table onClick of <a> tag in java script

Examples related to javascript

Examples related to asp.net

Examples related to html

Examples related to javascript-events

Examples related to toggle