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
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";
}
Source: Stackoverflow.com