SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Expanding Lists

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding Lists

    I have a list of categories that are collapsed by default and expand using javascript, when you click on the link.

    Code:
    // Javascript
    function toggleMenu(objID) {
    if (!document.getElementById) return;
    var ob = document.getElementById(objID).style;
    ob.display = (ob.display == 'block')?'none': 'block';
    }
    
    // CSS
    #programlist .mL { display: none; }
    
    
    <div id="programlist">
      <ul class='mC'>
        <li><a class='mH' onclick='toggleMenu("category1")'>Category 1</a>
          <ul id='category1' class='mL'>
            <li>Item A</li>
            <li>Item B</li>
          </ul>
        </li>
        <li>Category 2</li>
        ...
      </ul>
    </div>
    This works fine when javascript is enabled, but when it is disabled, the user can't access Item A & B since the list expands using javascript.

    Does anyone know how to have this list expanded when javascript is disabled and collapsed by default when javascript is enabled?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try:
    Code:
    <noscript>
    <style type="text/css">
    #programlist .mL { display: block; }
    </style>
    </noscript>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah of course. I'm not use to using noscript with css. This works great.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The other way if you used unobtrusive script would be to make the parent links say "Category 1" just a normal link. Then the script in an external file could override the links behaviour to make it expand/contract the sub links. Without javascript the "Category 1" link would go to it's linked page as normal . That page could have the sub links on it.


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
  •