Jump to content

Collapsable Table

Alienware

By Alienware
in Javascript Help

 Share

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
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
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
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
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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.