View Full Version : Need help with expandable menu script

03-04-2005, 06:20 PM
Hi all,

I am trying to make a script which will expand/collapse certain menu's with valid xhtml/css.

This is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<title>Menu tryout</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="functions.js"/>
<a href="#" class="button" id="buttonContent" onclick="menu('Content'); return false;">Bezit-overzicht</a>
<div id="menuContent" class="hidden_content">Content</div>

The included css is

.button {
padding-left: 15px;
background-image: url('plus_button.gif');
background-repeat: no-repeat;
background-position: center left;
.hidden_content {
display: none;

And finally my javascript is:

function menu(id) {
menu = document.getElementById(id+"Menu");
button = document.getElementById(id+"Button");
if (menu.style.display == "block") {
menu.style.display = "none";
button.style.backgroundImage = "url('plus_button.gif')";
else {
menu.style.display = "block";
button.style.backgroundImage = "url('minus_button.gif')";

The content div is hidden on default and has a + button image as background. What this script is supposed to do is change the background image and show the hidden content when someone clicks on the link and change it back if someone clicks again.

The problem is that it just doesn't work. My javascript console says "menu undefined" which doesn't make sense because I have included the .js file. Could anyone please help me with this? Thnx in advance.

Tim Stokman

One error found, backgroundImage instead of background-image, but it still doesn't work
Found another bug (stupid typo), it works now.