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.
You are trying to alter the behaviour of onclick
inside the same function call. Try it like this:
<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
function toggleTable() {
var lTable = document.getElementById("loginTable");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}