...

View Full Version : show/hide content help



trevxcore
07-15-2009, 03:20 AM
hi, ive created a series of expanding/collapsing tables using javascript, and as it is, you have to click each one individually to show/hide it. im looking for a way to collapse any open table when you click on a new one, so that its only possible to view one table at a time.
thanks,
-trevor

ckeyrouz
07-15-2009, 06:58 AM
when clicking on a table set the following:

<table onclick="fnClick(this)"></table>
< script >
var curTable = null;

function fnClick(zTable)
{
if(curTable == null)
{
// this means that there is no open table
// open the table by using the way you are doing
}
else // there is currently a selected table
{
if(zTable == curTable) // you have clicked on the table that is open
{
// in this case I do not know what you want to do. maybe close the table
}
else
{
// close curtable that is the current open table
// open zTable that is the reference to the table you have just clicked on
}
}
curTable = zTable;
// after you finish all your tests you set the current selected table the one that you //last clicked on it.

}

</script>

trevxcore
07-16-2009, 05:50 AM
thanks for the post, im not familiar enough with javascript yet and am still having trouble getting it to work, i originally had a code something along the lines of this, i appreciate the help.


<html>
<head>
<title>Untitled Document</title>
<script language="Javascript" type="text/javascript">
<!--
function show_hide(tblid, show) {
if (tbl = document.getElementById(tblid)) {
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');
}
}
//!-->
</script>
</head>
<body>
<a href="javascript:void();" onclick="show_hide('table1')">+/-table 1</a></td>
<table id="table1" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="javascript:void();" onclick="show_hide('table2')">+/-table 2</a></td>
<table id="table2" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="javascript:void();" onclick="show_hide('table3')">+/-table 3</a></td>
<table id="table3" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
</body>
</html>

ckeyrouz
07-16-2009, 06:10 AM
Try this:


<html>
<head>
<title>Untitled Document</title>
<script language="Javascript" type="text/javascript">
<!--
function show_hide(tblid)
{
if (tbl = document.getElementById(tblid))
{
var show = (tbl.style.display == "none");
tbl.style.display = (show ? "" : "none");
}
}
//!-->
</script>
</head>
<body>
<a href="#" onclick="show_hide('table1')">+/-table 1</a></td>
<table id="table1" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="#" onclick="show_hide('table2')">+/-table 2</a></td>
<table id="table2" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="#" onclick="show_hide('table3')">+/-table 3</a></td>
<table id="table3" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
</body>
</html>

trevxcore
07-16-2009, 08:37 PM
i appreciate all the help but the tables still all stay open when i click a new one :S

ckeyrouz
07-16-2009, 08:54 PM
function show_hide(tblid)
{


var allTbls = document.getElementsByTagName("table");
for(var i=0; i<allTbls.length; i++)
{
var tbl = document.getElementById(allTbls[i].id);
if(allTbls[i].id == tblid)
{
var show = (tbl.style.display == "none");
tbl.style.display = (show ? "" : "none");
}
else
{
tbl.style.display = "none";
}
}

}

trevxcore
07-16-2009, 09:07 PM
awesome! thanks so much!

trevxcore
07-16-2009, 11:14 PM
one more thing, if i place these collapsing tables within a larger table they no longer work what would be the fix for this?

ckeyrouz
07-17-2009, 03:37 PM
Post code to see what's happening.

trevxcore
07-17-2009, 05:42 PM
im just using the code you suggested it works perfect on its own but if i place the collapsing tables within a preexisting or larger table the it no longer functions, and i was wondering if you had a suggestion for this?




<html>
<head>
<title>Untitled Document</title>
<script language="Javascript" type="text/javascript">
<!--
function show_hide(tblid)
{


var allTbls = document.getElementsByTagName("table");
for(var i=0; i<allTbls.length; i++)
{
var tbl = document.getElementById(allTbls[i].id);
if(allTbls[i].id == tblid)
{
var show = (tbl.style.display == "none");
tbl.style.display = (show ? "" : "none");
}
else
{
tbl.style.display = "none";
}
}

}
//!-->
</script>
</head>
<body>
<table>

<a href="#" onclick="show_hide('table1')">+/-table 1</a></td>
<table id="table1" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="#" onclick="show_hide('table2')">+/-table 2</a></td>
<table id="table2" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>
<a href="#" onclick="show_hide('table3')">+/-table 3</a></td>
<table id="table3" style="display:none;">
<tr><td>contentcontentcontentcontentcontentcontentcontent
</td></tr>
</table>

</table>
</body>
</html>

ckeyrouz
07-17-2009, 06:12 PM
The point is the main table does not have an id and the method is throwing a script error.
Modify your function like this:




function show_hide(tblid)
{


var allTbls = document.getElementsByTagName("table");
for(var i=0; i<allTbls.length; i++)
{
var tbl = document.getElementById(allTbls[i].id);
if(tbl != null)
{
if(allTbls[i].id == tblid)
{
var show = (tbl.style.display == "none");
tbl.style.display = (show ? "" : "none");
}
else
{
tbl.style.display = "none";
}
}
}

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum