| 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: 4289
Location: 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: 4289
Location: 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? |
|
Straystudio
Joined: 14 Apr 2008
Posts: 297
Location: Nord Italy
|
| Posted: Thu Nov 26, 2009 12:43 pm |
|
|
|
I'll be introducing a (global) variable var facing collecting the last ID being fired; this last incomes as list parameter into the function. So I make the function defining facing = list; at its end, setting the facing variable ready for next click.
Since I can not leave it as undefined a variable for the very first click, I assign it anyone among the IDs so declaring: var facing = "First"; at first.
| Code: |
<html>
<head>
<script type="text/javascript">
var facing = "First";
function switchit(list){
if (list != facing){
document.getElementById(facing).style.display="none";
};
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
} else {
listElementStyle.display="none";
}
facing = list;
}
</script>
</head>
<body>
<a href="javascript:switchit('First')">First</a><br />
<div id="First" style="display: none;">
1<br />2<br />3<br />4
</div>
<a href="javascript:switchit('Second')">Second</a><br />
<div id="Second" style="display: none;">
1<br />2<br />3<br />4
</div>
<a href="javascript:switchit('Third')">Third</a>
<div id="Third" style="display: none;">
1<br />2<br />3<br />4
</div>
</body>
</html> |
|
|
patobrocks
Joined: 09 Feb 2010
Posts: 1
|
| Posted: Tue Feb 09, 2010 8:29 pm Oh yeah! Oh yeah baby! Baby, baby oh yeah! |
|
|
|
| dareskog wrote: |
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">
<!--
. . . .
. . . .
<a href="#" class="submenu">Link Four here</a>
</div>
</body>
</html> |
|
this is like the best code ever. I have been trying to make some other scripts work, butnot as slick as this sucka. I just couldn't get the others to be collapsed on page load. plus this code is smaller neater and cleaner. I am using it for a gallery home page for a construction company where each town has its own cluster (sub menu) and this workwed real well with the link images in the li.
thank you a thousand-fold.
I still can't believe how easy it worked.
what should I call it?
thanks again |
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
