How to toggle (hide/show) a table onClick of tag in Javascript

Question

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

The first time when I click the <a> link it shows my table, but not hiding back when I click it next time. What am I doing wrong?

You are always sending 'true'. Just hide the table if it is visible and show if it is hidden — Pitchai P, Mar 29 '13 at 06:37

score 21 · Accepted Answer · answered Mar 29 '13 at 06:38

21

You are trying to alter the behaviour of onclick inside the same function call. Try it like this:

Anchor tag

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

JavaScript

function toggleTable() {
    var lTable = document.getElementById("loginTable");
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}

answered Mar 29 '13 at 06:38

hjpotter92

78,589
36
144
183

can u explain it a little please? – Qadir Hussain Mar 29 '13 at 06:48
2

@QadirHussain [Ternary operator(`?...:`)](http://en.wikipedia.org/wiki/%3F:) or the [`onclick`](http://dev.opera.com/articles/view/handling-events-with-javascript/)? – hjpotter92 Mar 29 '13 at 06:54
Is't possible to use Anchor without using # in href or what control(or asp control) to use inplace of .? – Syed Mohamed Oct 01 '13 at 07:11
How would you make it so the table is hidden by default? – Moms Oct 11 '18 at 00:43
1

@Moms set `display="none"` as a css attribute. – hjpotter92 Oct 11 '18 at 08:42

Praveen kalal · Answer 2 · 2013-03-29T06:50:50.380

7

Simple using jquery

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

edited Mar 29 '13 at 06:50

answered Mar 29 '13 at 06:41

Praveen kalal

2,148
4
19
33

where should i paste it. sorry newbie for jquery. – Qadir Hussain Mar 29 '13 at 06:46
add this line in tag and then paste this script anywhere in your html part. – Praveen kalal Mar 29 '13 at 06:48
@Qadir Hussain i think its simple way. – Praveen kalal Mar 29 '13 at 06:57
yes upvote for this. but i need the code in java script. hjpotter92 answer is nice also. Many thanks to you also – Qadir Hussain Mar 29 '13 at 07:00

score 4 · Answer 3 · answered Mar 29 '13 at 06:37

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>

Manish Mishra · Answer 4 · 2013-03-29T06:49:18.240

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

score 1 · Answer 5 · answered Mar 29 '13 at 10:22

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

}

score 0 · Answer 6 · answered Mar 29 '13 at 06:38

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

score 0 · Answer 7 · answered Mar 29 '13 at 06:42

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>

score 0 · Answer 8 · answered Sep 19 '17 at 05:14

0

visibility property makes the element visible or invisible.

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

answered Sep 19 '17 at 05:14

gifpif

4,507
4
31
45

How to toggle (hide/show) a table onClick of tag in Javascript

8 Answers8

Anchor tag

JavaScript

Linked