SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Drop down menu

  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down menu

    Currently this piece of code causes a list to drop down when the user clicks on a certain category. Is there a way to close that category when another is clicked on.

    For example: List One is clicked on and opens, then list two is clicked on, and list one closes automatically, leaving list two open by itself.

    The code as it stands:

    Code:
    function toggle( targetId ){
      if (document.getElementById){
      		target = document.getElementById( targetId );
      			if (target.style.display == "none"){
      				target.style.display = "";
      			} else {
      				target.style.display = "none";
      			}
      	}
    }
    [It applies to the following piece of (x)html]

    Code:
    <div title="list one">
       <p><a href="/" onclick="toggle('mlistone');return false;">List One</a></p>
       <dl id="mlistone" style="display:none;">
          <dt style="display:none;">List One</dt>
             <dd><a href="alpha.htm">Alpha</a></dd>
             <dd><a href="beta.htm">Beta</a></dd>
             <dd><a href="gamma.htm">Gamma</a></dd>
       </dl>
    </div>
    	
    <div title="list two">
       <p><a href="/" onclick="toggle('mlisttwo');return false;">List Two</a></p>
       <dl id="mlisttwo" style="display:none;">
          <dt style="display:none;">List Two</dt>
             <dd><a href="delta.htm">Delta</a></dd>
             <dd><a href="epsilon.htm">Epsilon</a></dd>
             <dd><a href="theta.htm">Theta</a></dd>
       </dl>
    </div>
    (Due to the nature of the script, it's easily possible to add any number of lists simply by changing the id of the onclick element, if it's possible, I'd like to retain this feature).

    Thanks for any help.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your function you can just clear all menus before showing the one that was clicked on. add this:
    Code:
    document.getElementById('mlistone').style.display = "none";
    document.getElementById('mlisttwo').style.display = "none";
    
    target = .........

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  3. #3
    SitePoint Member
    Join Date
    Mar 2003
    Location
    UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great, thank-you


Bookmarks

Posting Permissions

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