Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with expandable menu script

    Hi all,

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

    This is my html:
    Code:
    <!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">
    <head>
     <title>Menu tryout</title>
     <link rel="stylesheet" href="style.css" type="text/css"/>
     <script type="text/javascript" src="functions.js"/>
    </head>
    <body>
     <a href="#" class="button" id="buttonContent" onclick="menu('Content'); return false;">Bezit-overzicht</a>
     <div id="menuContent" class="hidden_content">Content</div>
    </body>
    </html>
    The included css is
    Code:
    .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:
    Code:
    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

    Edit: One error found, backgroundImage instead of background-image, but it still doesn't work

    Edit: Found another bug (stupid typo), it works now.
    Last edited by logophobia; 03-04-2005 at 08:36 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •