How to collapse and expand a category?
-
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:
Christmas
Easter
New YearsBut when Christmas is clicked, I want:
Christmas
Pudding
Trees
Toys
Easter
New YearsThe 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?
-
hi,
do you mean something like there: http://www.scss.com.au/family/andrew/webdesign/explorertree/#triangles ?
sorry, you can’t expose the only categories that you want. it’s either all or nothing.
not on wordpress.com
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.
-
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; } -
@sunburntkamel
Does this allow a blog visitor to expand and collapse the subcategories from the category widget? -
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)
-
@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). -
-
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.
-
- The topic ‘How to collapse and expand a category?’ is closed to new replies.