 |
HTML Help
Please Search for the answer to your question before asking it! Thanks.
|
| View previous topic :: View next topic |
| Author |
Message |
dareskog
Joined: 20 Oct 2009
Posts: 6
|
| Posted: Sat Oct 24, 2009 4:07 am Javascript expand/collapse menu's, collapsed on page load |
|
|
I've managed to get some code for a basic expand/collapse menu. But how do i make it all collapsed on page load?
Code:
<html>
<head>
<script type="text/javascript">
function switchit(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else {
listElementStyle.display="none";
}
}
</script>
</head>
<body>
<a href="javascript:switchit('First')">First</a><br />
<div id="First">
1<br />2<br />3<br />4
</div>
<a href="javascript:switchit('Second')">Second</a>
<div id="Second">
1<br />2<br />3<br />4
</div>
</body>
</html>
|
|
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3593
Location: Biloxi, MS
|
| Posted: Sat Oct 24, 2009 6:59 pm |
|
|
| I do not see any html tag with an id of "list". Might recheck how to use that as the script has it not showing, but it can't work as the "getElementById(list)" has no target. |
|
|
dareskog
Joined: 20 Oct 2009
Posts: 6
|
| Posted: Sun Oct 25, 2009 1:36 am |
|
|
Would you be able to suggest an alternative javascript for this type of collapsable menu? I'm a javascript n00b but i know my css and html fairly well.
I've googled it but this was the only "short and sweet" piece of code, all the others seem to be too complex. I only want something basic.
Cheers again |
|
|
dareskog
Joined: 20 Oct 2009
Posts: 6
|
| Posted: Sun Oct 25, 2009 7:28 am |
|
|
I've got an alternative i've found, which ive managed to adapt to my needs.
I thought i'd post it just incase other people need something like this.
Code: <html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}
//-->
</script>
<style type="text/css">
.menu1 {
cursor: pointer;
}
.hide {
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
<div id="mymenu3" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
<div id="mymenu4" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
<a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
<div id="mymenu5" class="hide">
<a href="#" class="submenu">Link One here</a>
<a href="#" class="submenu">Link Two here</a>
<a href="#" class="submenu">Link Three here</a>
<a href="#" class="submenu">Link Four here</a>
</div>
</body>
</html> |
|
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3593
Location: Biloxi, MS
|
| Posted: Sun Oct 25, 2009 9:47 am |
|
|
| Sweet. That'll work. Had some other links, but didn't get back before you replied. |
|
|
shaish
Joined: 25 Oct 2009
Posts: 1
|
| Posted: Sun Oct 25, 2009 10:40 pm |
|
|
Hey i want to expand only 1 menu at a time. The others should collapse automatically ...
Can any1 help me? |
|
|
dareskog
Joined: 20 Oct 2009
Posts: 6
|
| Posted: Mon Oct 26, 2009 7:40 am |
|
|
| Yeah ideally I'd like the same to happen, any ideas anyone? |
|
|
| |
|
|
|
Powered by phpBB Search Engine Indexer
Powered by phpBB 2.0.19 © 2001, 2002 phpBB Group
|
