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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hide parent items of nested lists

    I've got a big list, and I want all the nested <ul> to be visible, but the top-level <li> to be invisible or not displayed in some way. The top-level items have to have content - simply not having anything in them is not an option.

    Any ideas?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean like:

    Item 1 <- hidden
    * Item 1.1 <- visible
    * Item 2.1 <- visible
    Item 2 <- hidden
    * Item 2.1 <- visible
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, I can't think of a way to do this, except by creating the lists in such a way that you don't really have to hide something while you show it's contents. How about somehow putting what you want to hide in the lists you want to hide, or if appropriate using a definition list. (This might be a good solution for some navigation lists.)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I can quite visualize what you're trying to do, but is it something like this?
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    .nodisplay {
      display : none;
      }
    .nomargin {
      margin: 0px;
      }
    -->
    </style>
    </head>
    <body>
    <ul class="nomargin">
    <li><span class="nodisplay">This won't display.</span>
    <ul>
    <li>Item One</li>
    <li>Item One</li>
    <li>Item One</li>
    <li>Item One</li>
    <li>Item One</li>
    <li>Item One</li>
    <li>Item One</li>
    </ul>
    </li>
    <li><span class="nodisplay">This won't display.</span>
    <ul>
    <li>Item Two</li>
    <li>Item Two</li>
    <li>Item Two</li>
    <li>Item Two</li>
    <li>Item Two</li>
    <li>Item Two</li>
    <li>Item Two</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    Need more emoticons?
    Visit Catman's Private Stock

  • #5
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <li style="list-style:none; height:0">??
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    It's impossible to hide a parent but display the children, at least without using height: 0; and overflow: visible; But then I guess it's not the element itself you want to hide, but rather some content of it.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    You mean like this???

    Code:
    <html>
    <head>
    <style type="text/css">
    ul li {
    	visibility:hidden;
    }
    ul li ul li {
    	visibility:visible;
    }
    </style>
    </head>
    <body>
    <ul>
    	<li>Test 1
    		<ul>
    			<li>test 1.1</li>
    			<li>test 1.2</li>
    		</ul>
    	</li>
    	<li>Test 2
    		<ul>
    			<li>test 2.1</li>
    			<li>test 2.2</li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, have a look at it in op7 (which renders it correctly, BTW).
    You see, when you set the visibility for the parent, even if the children are set to be visible, they are put in a container that isn't, and thus are not displayed. It's the same as the text-decoration, where you can set an underline on the parent but none on the child, and get the parent's underline to render for the child while what you wanted to do was remove just that underline. This is best displayed if you change the colour of the child from that of the parent, since the underline stays the colour of the parent. (Which I've used for "cool effect" sometimes.)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So... would <li style="height: 0; overflow: visible;"> work?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Only if what you want to hide is the actual parent element, not if you want to hide any contents.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is what I want - like Vladdy's diagram. Anything like visibility, display, clip or overflow:hidden on the parent hides the whole thing, including it's children, and that's no good.

    I tried "height:0;overflow:visible" but that didn't work, but it might be possible to position the parents like -200px off the window, and reposition the children to compensate; I'm trying that now ..
    Last edited by brothercake; 10-02-2003 at 06:22 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Well, I suppose you could set the color = background-color unless you've got an image for a background

    Just a thought.

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think the Catmans solution while adding an extra span gives the most flexibility and best results. Here is my version:

    Code:
    #bcakelist>li>span
     { display: none;
     }
    
    #bcakelist>li
     { display: block;
     }
    
    <ul id="bcakelist">
    <li><span>Item 1</span><ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li></ul></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span><ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li></ul></li>
    </ul>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't add an extra <span> because it's for an API, and the process overload of creating them all dynamically is too much.

    But that's cool - I set position:absolute on the <ul> and the <li>, and that makes them all stack up in the same place, then I positioned the whole thing -2000px off the screen in both directions, then repositioned the nested <ul> by +2000px, and that did the trick. Unless there's some obvious gotcha I haven't thought of ..?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #15
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I suppose you could set the color = background-color unless you've got an image for a background
    Highlitable.

    #bcakelist>li>span
    { display: none;
    }

    #bcakelist>li
    { display: block;
    }
    IE doesn't recognise >, just put a space in.

    then I positioned the whole thing -2000px off the screen in both directions, then repositioned the nested <ul> by +2000px, and that did the trick.
    Doesn't that make it scroll?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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