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

I want to show and hide (toggle) the <table> onClick event of the <a>. this is my <a> tag

<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>

here is my java script function toggleTable(hide)

   <script>
    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);
    }
   }
   </script>

and here is my <table> tag

<table id="loginTable" border="1" align="center" style="display:none">

1st time when I click the <a> link it shows my table, but not hiding back when i click it next time. what i m doing wrong.

This question is related to javascript asp.net html javascript-events toggle

The answer is


Simple using jquery

<script>
$(document).ready(function() {
    $('#loginLink').click(function() {
    $('#loginTable').toggle('slow');
    });
})
</script>

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


Your anchor tag should be:

  <a id="loginLink" onclick="showHideTable();" href="#">Login</a>

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";

}

Try

<script>
  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";
    }
  }
</script>

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:

<a id="loginLink" onclick="toggleTable();" href="#">Login</a>

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


visibility property makes the element visible or invisible.

function showTable(){
    document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
    document.getElementById('table').style.visibility = "hidden";
}

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to asp.net

RegisterStartupScript from code behind not working when Update Panel is used You must add a reference to assembly 'netstandard, Version=2.0.0.0 No authenticationScheme was specified, and there was no DefaultChallengeScheme found with default authentification and custom authorization How to use log4net in Asp.net core 2.0 Visual Studio 2017 error: Unable to start program, An operation is not legal in the current state How to create roles in ASP.NET Core and assign them to users? How to handle Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() ASP.NET Core Web API Authentication Could not load file or assembly 'CrystalDecisions.ReportAppServer.CommLayer, Version=13.0.2000.0 WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jquery

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to javascript-events

How to fire an event on class change using jQuery? how to toggle (hide/show) a table onClick of <a> tag in java script How to pass parameter to function using in addEventListener? Open popup and refresh parent page on close popup How to remove all listeners in an element? Destroy or remove a view in Backbone.js Add event handler for body.onload by javascript within <body> part How to trigger jQuery change event in code How can I trigger an onchange event manually? Intercept page exit event

Examples related to toggle

How to add the text "ON" and "OFF" to toggle button How do I toggle an element's class in pure JavaScript? Toggle visibility property of div slideToggle JQuery right to left bootstrap initially collapsed element how to toggle (hide/show) a table onClick of <a> tag in java script jquery toggle slide from left to right and back Button text toggle in jquery How to toggle a boolean? Toggle show/hide on click with jQuery