Jump to content

Collapsable Table

Alienware

By Alienware
in Javascript Help

Recommended Posts

Alienware Member

Alienware

Posted
Posted

Ok so on my game i have a menu that runs on the left hand side of the site.

 

I would like to make the tables on it collapsable

 

here is one of the tables-

 

 

<table align="center" width="100%" class="tbl">
<tr><td align="center" class="hdr">.::Other::.</td></tr>
<tr><td align="left" class="tbl">
 <a href="you.php" target="main">Your stats</a><br />
 <a href="personal.php" target="main">Personal</a><br />
 <a href="vote.php" target="main">Vote</a><br />
 <a href="statistics.php" target="main">Game statistics</a><br />
 <a href="notfinished.php" onclick="window.open(this.href, '_blank', 'width=500,height=700,scrollbars=yes,resizable=no,status=no,screenx=5,screeny=5');return false;" onkeypress="this.onclick()">FAQ</a><br />
 <a href="abusereport.php" target="main"><font color="red">Report Abuse</font></a><br />
 <a href="request.php" target="main"><font color="red">Parental control</font></a><br />
 <a href="logout.php" target="main">Logout</a><br />
</td></tr>
</table>

 

I would like to only show the .::Other::. as it does now.. but when a user clicks on it the list drops down.

 

any ideas? im stuck

Link to comment
https://forums.phpfreaks.com/topic/122665-collapsable-table/
Share on other sites
Ken2k7 Member

Ken2k7

Posted
Posted

Try this:

<table align="center" width="100%" class="tbl">
<tr><td align="center" class="hdr" onclick="unHideTR('tbl');">.::Other::.</td></tr>
<tr style='display: none;'><td align="left" class="tbl">
 <a href="you.php" target="main">Your stats</a><br />
 <a href="personal.php" target="main">Personal</a><br />
 <a href="vote.php" target="main">Vote</a><br />
 <a href="statistics.php" target="main">Game statistics</a><br />
 <a href="notfinished.php" onclick="window.open(this.href, '_blank', 'width=500,height=700,scrollbars=yes,resizable=no,status=no,screenx=5,screeny=5');return false;" onkeypress="this.onclick()">FAQ</a><br />
 <a href="abusereport.php" target="main"><font color="red">Report Abuse</font></a><br />
 <a href="request.php" target="main"><font color="red">Parental control</font></a><br />
 <a href="logout.php" target="main">Logout</a><br />
</td></tr>
</table>

<script>
function unHideTR (c) {
     var e = document.getElementsByTagName("td"), l = e.length;
     while (--l > -1)
          if (e[l].className == c)
               toggleHide(e[l].parentNode);
}
function toggleHide (e) {
     if (!e || !e.style.display) return;
     var alt = e.style.display == "none"? "block" : "none";
     e.style.display = alt;
}
</script>

Link to comment
https://forums.phpfreaks.com/topic/122665-collapsable-table/#findComment-633408
Share on other sites
Alienware Member

Alienware

Posted
  • Author
Posted

yes that is correct, and thankyou so much for helping.

 

The only problem is.. i have more than one..

 

I have done the same to all on the menu bar..

 

But the problem is.. when a user clicks on one... instead of just that one dropping down, they all drop down.

 

here is the site-

www.ny-mobster.net

Username: review

password: review

 

you will see what i mean

Link to comment
https://forums.phpfreaks.com/topic/122665-collapsable-table/#findComment-633438
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Give each secondary TR a unique ID and then call the function within the top TR passing the unique ID

 

<html>
<head>
<script>

function showHideTR(trID)
{
    trObj = document.getElementById(trID);
    trObj.style.display = (trObj.style.display!='block') ?  'block' : 'none';
}

</script>

</head>

<body>

<table align="center" width="100%" class="tbl" border=1>
<tr><td align="center" class="hdr" onclick="showHideTR('tbl-1');">.::Other::.</td></tr>
<tr style='display:none;' id="tbl-1"><td align="left" class="tbl">
 <a href="you.php" target="main">Your stats</a><br />
 <a href="personal.php" target="main">Personal</a><br />
 <a href="vote.php" target="main">Vote</a><br />
 <a href="statistics.php" target="main">Game statistics</a><br />
 <a href="notfinished.php" onclick="window.open(this.href, '_blank', 'width=500,height=700,scrollbars=yes,resizable=no,status=no,screenx=5,screeny=5');return false;" onkeypress="this.onclick()">FAQ</a><br />
 <a href="abusereport.php" target="main"><font color="red">Report Abuse</font></a><br />
 <a href="request.php" target="main"><font color="red">Parental control</font></a><br />
 <a href="logout.php" target="main">Logout</a><br />
</td></tr>
</table>

<table align="center" width="100%" class="tbl" border=1>
<tr><td align="center" class="hdr" onclick="showHideTR('tbl-2');">.::FUN AND SAFE::.</td></tr>
<tr style='display:none;' id="tbl-2"><td align="left" class="tbl">
NY-Mobster is a fun place to be, but on<br />
top of that we aim to be the safest too!<br />
<br />
If you are a parent of a young person on<br />
NY-Mobster and have any concerns<br />
about the welfare of your child online,<br />
this is understandable.<br />
To combat this, you may join up then<br />
request parental controls, you may then<br />
monitor your childs messages to make<br />
sure you are happy!<br />
<br />
There is a staff member on most of the<br />
time to help solve any problems.<br />
<br />
We hope you enjoy NY mobster like<br />
many others!<br />
</td></tr>
</table>

</body>
</html>

 

You should consider adding a "pointer" mouse cursor to the 'hdr' class for usability.

Link to comment
https://forums.phpfreaks.com/topic/122665-collapsable-table/#findComment-633449
Share on other sites
Ken2k7 Member

Ken2k7

Posted
Posted 
<table align="center" width="100%" class="tbl">
<tr><td align="center" class="hdr" onclick="unHideTR(this.parentNode.parentNode);">.::Other::.</td></tr>
<tr style='display: none;'><td align="left" class="tbl">
 <a href="you.php" target="main">Your stats</a><br />
 <a href="personal.php" target="main">Personal</a><br />
 <a href="vote.php" target="main">Vote</a><br />
 <a href="statistics.php" target="main">Game statistics</a><br />
 <a href="notfinished.php" onclick="window.open(this.href, '_blank', 'width=500,height=700,scrollbars=yes,resizable=no,status=no,screenx=5,screeny=5');return false;" onkeypress="this.onclick()">FAQ</a><br />
 <a href="abusereport.php" target="main"><font color="red">Report Abuse</font></a><br />
 <a href="request.php" target="main"><font color="red">Parental control</font></a><br />
 <a href="logout.php" target="main">Logout</a><br />
</td></tr>
</table>

<script>
function unHideTR (c) {
    toggleHide(c.getElementsByTagName("tr")[1]);
}
function toggleHide (e) {
    if (!e || !e.style.display) return;
    var alt = e.style.display == "none"? "block" : "none";
    e.style.display = alt;
}
</script>

Link to comment
https://forums.phpfreaks.com/topic/122665-collapsable-table/#findComment-633450
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.