Question

136

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

rated 0 times [ 142] [ 6] / answers: 1 / hits: 127386 / 11 Years ago, fri, march 29, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byrondonavanc

Add To Favorites

Follow

Total Points: 675

Total Questions: 107

Total Answers: 105

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

byrondonavanc questions

1 Mongoose, getting TypeError: Cannot read properties of undefined (reading 'find')

Tue, Dec 28, 21, 00:00, 2 Years ago

1 Properly handle multiple files input with Formik and React

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Puppeteer pdf page break bug

Thu, Mar 25, 21, 00:00, 3 Years ago

1 React useEffect() : Most efficient way to compare if two arrays of objects are equal

Fri, Dec 4, 20, 00:00, 4 Years ago

1 How to close dropdown on outside click NEXT.JS

Sat, Jul 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jelani · Accepted Answer

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;

}