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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DHTML/JS Expanding Menus Help Needed

    Ok Here is the Code:

    The problem is I have got the menus to expand but I need them to also retract for example when you click on work it expands, but then you click on Test and it expands by work does not contract. This is peeing me off and I have tried everything to fix, I know it is something simple but cannot pinpoint it. I have turned to here as a last resort your help is appreciated.

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <script type='text/javascript' src='main.js'></script>
    <style>
    body
    {color:white;background-color:steelblue;font-family:verdana;font-size:8pt;}
    h1 {font-size:12pt;}
    .menu    {background-color:darkslategray;border-style:inset;border-width:thin;width:100px;font-weight:bold;}
    a        {color:white;background-color:darkslategray;text-decoration:none;width:100%;}
    a.submenu {background-color:darkslategray;width:100%;}
    a:hover  {color:goldenrod;}
    </style>
    
    <script>
    function showhide(id){
       if (document.getElementById(id).style.display == 'none')
               {document.getElementById(id).style.display = 'block';}
       else  {document.getElementById(id).style.display = 'none';}
    }
    </script>
    </head>
    <body>
    <h1>Text Here</h1>
    <b>Click on the Menus below</b><br />
    
    <div class="menu"><a href="#" onclick="showhide('menu1'); return false">
    Work</a></div>
    <div id="menu1"  class="menu" style="display: none">
      <a href='#' class='submenu'>HTML Basics</a><br />
      <a href='#' class='submenu'>Stylesheets </a><br />
      <a href='#' class='submenu'>DHTML </a><br />
      <a href='#' class='submenu'>XML </a><br />
    </div>
    
    <div class="menu"><a href="#" onclick="showhide('menu2'); return false">
    Play</a></div>
     <div id="menu2" class="menu" style="display: none">
        <a href='#' class='submenu'>Pay Rise</a><br />
        <a href='#' class='submenu'>Holiday</a><br />
        <a href='#' class='submenu'>Sport </a><br />
    </div>
    
    <div class="menu"><a href="#" onclick="showhide('menu3'); return false">
    Test</a></div>
     <div id="menu3" class="menu" style="display: none">
        <a href='#' class='submenu'>Pay Rise</a><br />
        <a href='#' class='submenu'>Holiday</a><br />
        <a href='#' class='submenu'>Sport </a><br />
    </div>
    
    <div class="menu"><a href="#" onclick="showhide('menu4'); return false">
    Test More</a></div>
     <div id="menu4" class="menu" style="display: none">
        <a href='#' class='submenu'>Pay Rise</a><br />
        <a href='#' class='submenu'>Holiday</a><br />
        <a href='#' class='submenu'>Sport </a><br />
    </div>
    
    </body>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <script>
    var Lst;
    function showhide(id){
     var obj=document.getElementById(id);
       if (obj.style.display == 'none')
               {obj.style.display = 'block';}
       else  {obj.style.display = 'none';}
     if (Lst){
      if (Lst!=obj){
       Lst.style.display = 'none';
      }
     }
     Lst=obj;
    }
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou I knew it had to be something to do with the script


  •  

    Posting Permissions

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