Toggle Menu Script-Looking for...

[PlaGuE]

Im trying to find a script like ipb that toggles menu's so they expand and contract.


I've looked around and cant seem to find a good explaination of how its done.. or a script taht accually works. outa the free ones i mean.


Any help in a direction would be nice.

Thanks.

[penagate]

Concept is very simple, just toggle the visibility state on click of a button. A small JS function.

function toggleVisibility(id)
{
    element = document.getElementById(id);
    element.style.visibility = (element.style.visiblity == 'visible' ? 'hidden' : 'visible');
}

And to bind to a couple of elements:

<!-- The toggle: -->
<p><a title="Toggle visiblity" href="javascript:toggleVisibility('block1)">Toggle</a></p>

<div id="block1">
    <p>Anything within this div should appear/disappear when the above link is clicked.</p>
</div>

[PlaGuE]

That dont work btw... it gave error in IE and did nutin in FF.
If you have solution post it.. Until then ima keep trying.

Thanks For your help.

If this helps in finding what im looking for tehn...

here it is..

What i have is a table with links in it.

this is a slab of the table with links... one header and then after that is links.

the first <tr></tr> is the nav header with the image on it that when clicked will hide it.

<!-- ////////////////////////////// -->
<tr>
        <td width="160" height="34" background="template/default/images/cbv1_01.gif" class="navigation_body"><div align="center" class="style1"> 
          <div align="left"> <img src="images/exp_minus.gif" width="10" height="10" onclick="toggleVisibility('member_console')"> Members Console</div>
        </div></td>
      </tr>
<!-- ////////////////////////////// -->
      <!-- Toggle Member Console //-->
      <tr>
        <td height="18" class="navigation_body">ddfa</td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=change_password">Change Password*</a></div></td>
      </tr>
      <tr>
        <td height="20" class="navigation_body"><div align="left"><a href="?console&OPT=change_stats">Change Stats*</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=private_messages">Private Messages(1)</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=view_logs">View Logs</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=log_out">Log Out</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=request_inactiveness">Request Inactiveness</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=leave_clan">Leave Clan*</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="?console&OPT=change_skin">Change Skin</a></div></td>
      </tr> 

im pretty sure im going to have to make it one <tr></tr>

and have div's separate the links. Thats of coarse if i cant do it this way.?Can I?
I'd love to learn Javascript so i could do this easily.. but idk where to look.. Google is sucking.

[PlaGuE]

Last post kinda solved. I can turn it invisible.. but ...meh dont wana just use div's... n stuff.. if you get what i mean...hopefully.

How would i make it so that when it turns invisible it doesnt seem like its a big space missing?

cuz just the content goes away.....meh..

[penagate]

To remove part of a table, use the value "collapse" in place of "hidden". That will remove the whitespace left when the element is hidden.

If you need to be able to toggle sections of the table at once, you can use multiple <tbody> elements. Each <tbody> can contain multiple <tr>'s, thus forming a section of the full table.

BTW, next time just post again instead of editing, I never saw that message so I couldn't help earlier

[PlaGuE]

ahh okay.

about the <tbody> i've never used em before.. dont really know what they used for...so i never woulda thought about that.Thanks.


Works in FF not IE... how would i fix that?



Btw.. i usually edit my posts.. but when i feel that i have something to say that may conflict with what the earlier post has..i'll "usually" post another reply.

I know i should stop doing that but...ehh.

[penagate]

Can you post the file? I'd like to fiddle with it. It's always a pain trying to get things working properly in IE.

[PlaGuE]

sure.

<link href=".../../template/default/style.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript">
<!--  Clock --
var timerID = null
var timerRunning = false

function stopclock(){
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function startclock(){
    stopclock()
    showtime()
}

function showtime(){
    var now = new Date()
    var hours = now.getHours()
    var minutes = now.getMinutes()
    var seconds = now.getSeconds()
    var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
    timeValue  += ((minutes < 10) ? ":0" : ":") + minutes
    timeValue  += ((seconds < 10) ? ":0" : ":") + seconds
    timeValue  += (hours >= 12) ? " P.M." : " A.M."
    document.clock.face.value = timeValue 
    timerID = setTimeout("showtime()",1000)
    timerRunning = true
}
//-->
//----------------------------------------------------->
// Toggle menu test function
function togglemenu(id)
{
element = document.getElementById(id);
element.style.visibility = (element.style.visibility == 'collapse' ? 'visible' : 'collapse');
}
</SCRIPT>
<BODY onLoad="startclock()">
<style>
input.clock{ background-color:003366;
		   border-color:#000000;
		   border-width:1px;
		   border-style:none;
}
</style>
<!-------------------------------------------------------------------------------------------->
<form name="clock" onSubmit="0">
<INPUT TYPE="text" class="clock" NAME="face" SIZE=11 VALUE ="Clock" readonly="true">
</form>

CDGS Console Javascript Enabled
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="178" valign="top"><table width="162" border="0" align="left" cellpadding="0" cellspacing="0" class="navigation_table">
      <tr>
        <td width="160" height="34" background="template/default/images/cbv1_01.gif" class="navigation_body"><div align="center" class="style1"> 
          <div align="left"> <img src="images/exp_minus.gif" width="10" height="10" onClick="togglemenu('member_console')"> Members Console</div>
        </div></td>
      </tr>
	  <!-- Toggle Member Console //-->
	  <tbody id="member_console">
	  <tr>
      <td height="18" class="navigation_body"><div align="left"><a href="">Change Profile*</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Change Password*</a></div></td>
      </tr>
      <tr>
        <td height="20" class="navigation_body"><div align="left"><a href="">Change Stats*</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Private Messages(1)</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">View Logs</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Log Out</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Request Inactiveness</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Leave Clan*</a></div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left"><a href="">Change Skin</a></div></td>
      </tr>
	  </tbody>
	  <!-- Toggle Member Console //-->
      <tr>
        <td width="160" height="34" background="template/default/images/cbv1_01.gif" class="navigation_body"><div align="center" class="style1">
          <div align="left"><img src="images/exp_minus.gif" alt="Expand" width="10" height="10" onClick="togglemenu('wo_console')"> Warrant Officers Console</div>
        </div></td>
      </tr>
	  	  <!-- Toggle Warrant Officer Console //-->
	  <tbody id="wo_console">
      <tr>
        <td height="9" class="navigation_body"><div align="left">Recruit Member*</div></td>
      </tr>
      <tr>
        <td height="9" class="navigation_body"><div align="left">Post News</div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left">Vote For Trainee</div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left">Upload Files</div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left">Add Files</div></td>
      </tr>
      <tr>
        <td height="18" class="navigation_body"><div align="left">Remove Files</div></td>
      </tr>
<!-- Toggle Warrant Officer Console //-->
	  </tbody>
      <tr>
        <td height="24" background="template/default/images/cbv1_03.gif" class="navigation_body">&nbsp;</td>
      </tr>
    </table></td>
    <td width="1032" valign="top"><div align="center"><br />
    Content n stuff. </div></td>
  </tr>
</table>

It may not be pretty... but atm im not about making the code look nice..just getting it to work first.