Need help? Check out our Support site, then

How to collapse and expand a category?

  1. Hi all,

    I have a site that's all finished up except that the categories are always exposed. I want to only show the primary categories at first, and then show all the sub categories when somebody is in that one.

    For example, on the homepage I want:

    New Years

    But when Christmas is clicked, I want:

    New Years

    The sub categories are already assigned as children in the manager, so how do I set it up to only expose the ones that I want?

  2. hi,

    do you mean something like there: ?

    sorry, you can't expose the only categories that you want. it's either all or nothing.

    not on

    other days I submitted this very idea through a feedback form twice, not a single reply since. it's also mentioned in the so called "ideas" forums long ago.

  3. that's not true, options, there are CSS classes in the category widget.

    as long as you're not using the dropdown.

    this CSS rule will hide all the subcategories:
    ul.children { display: none; }
    this rul will show the children of the current category:
    li.current-cat ul.children { display: block; }

  4. @sunburntkamel
    Does this allow a blog visitor to expand and collapse the subcategories from the category widget?

  5. no, this just condenses the category list. it expands when you're on a category page.

    if you want the categories to expand, you'll need to also add:

    li.current-cat:hover ul.children, li.current-cat:active ul.children { display: block; }

    (this won't work in IE6 and below)

  6. @sunburntkamel
    Thanks a bunch for clarifying that, and for posting the extra code to expand the categories on hover. I'm bookmarking this page for the future (and it will end up on my .org blog).

  7. @sbk
    Thanks from me too - bookmarked. :-)

  8. now that i think about it- that doesn't actually do what you need
    that would only work on the category page.

    i can't think of a way to do on-demand accordian menus in CSS-only.

  9. @sunburntkamel
    Thanks for the clarification it's a good thing to know anyway.

Topic Closed

This topic has been closed to new replies.

About this Topic