Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Collapsing Categories

Adds a widget which uses Javascript to dynamically expand or collapse the set of posts for each category.

= sidebar li a {display:block}

= that is the problem. You probably want to add a float:left to the .sym class

No categories are showing up! What's wrong?"

Are you using categories or tags? By default, collapsing categories only lists categories. Please check the options in the settings page (or in the widget if you are using the widget)

How do I change the style of the collapsing categories lists?

As of version 2.0, there are several default styles that come with collapsing-categories. You can choose from these in the widget settings , or you can create your own custom style. A good strategy is to choose a default, then modify it slightly to your needs.

The following classes are used: * collapsing - applied to all ul and li elements * categories - applied to all ul and li elements * list - applied to the top-level ul * item - applied to each li which has no sub-elements * expand - applied to a category which can be expanded (is currently collapsed) * collapse - applied to a category which can be collapsed (is currently expanded) * sym - class for the expanding / collapsing symbol

An example:

<ul id='widget-collapscat-15-top ' class='collapsing categories list'>
  <li class='collapsing categories post'><a
    title='About your own site'>About your own site</a>
  <li class='collapsing categories'><span class='collapsing categories expand'
    onclick='expandCollapse(event, "▶","▼", 1, "collapsing categories"); return
    false'><span class='sym'>▶</span>Web hosting</span>
    <ul id='collapsCat-176-15' style="display:none">
      <li class='collapsing categories post'><a 
        title='About webhosting'>About webhosting</a>
      <li class='collapsing categories post'><a 
        title='Webhosting #1'>Webhosting #1</a>
      <li class='collapsing categories post'><a 
        title='Webhosting #2'>Webhosting #2</a>
  </li> <!-- ending subcategory -->


Style options can be set via the settings panel. All other options can be set from the widget panel. If you wish to insert the code into your theme manually instead of using a widget, you can use the following options. These options can be given to the collapsCat() function either as an array or in query style, in the same manner as the wp_list_categories function.

   'showPostCount' => true,
   'inExclude' => 'exclude',
   'inExcludeCats' => '',
   'showPosts' => true, 
   'showPages' => false,
   'linkToCat' => true,
   'olderThan' => 0,
   'excludeAll' => '0',
   'catSortOrder' => 'ASC',
   'catSort' => 'catName',
   'postSortOrder' => 'ASC',
   'postSort' => 'postTitle',
   'expand' => '0',
   'defaultExpand' => '',
   'postTitleLength' => 0,
   'accordion' => 0,
   'catfeed' => 'none',
   'taxonomy' => 'category',
   'showPostDate' => false,
   'postDateAppend' => 'after',
   'postDateFormat' => 'm/d',
   'useCookies' => true,
   'showTopLevel' => true,
   'postsBeforeCats' => false,
   'expandCatPost' => true,
  • inExclude
    • Whether to include or exclude certain categories
      • 'exclude' (default)
      • 'include'
  • inExcludeCats
    • The categories which should be included or excluded
  • showPages
    • Whether or not to include pages as well as posts. Default if false
  • linkToCat
    • 1 (true), clicking on a category title will link to the category archive (default)
    • 0 (false), clicking on a category title expands and collapses
  • catSort
    • How to sort the categorys. Possible values:
      • 'catName' the title of the category (default)
      • 'catId' the Id of the category
      • 'catSlug' the url of the category
      • 'catCount' the number of posts in the category
      • 'catOrder' custom order specified in the categorys settings
  • catSortOrder
    • Whether categories should be sorted in normal or reverse order. Possible values:
      • 'ASC' normal order (a-z 0-9) (default)
      • 'DESC' reverse order (z-a 9-0)
  • postSort
    • How to sort the posts. Possible values:
      • 'postDate' the date of the post (default)
      • 'postId' the Id of the post
      • 'postTitle' the title of the post
      • 'postComment' the number of comments on the post
      • 'postOrder' sort by menu order
  • postSortOrder
    • Whether post should be sorted in normal or reverse order. Possible values:
      • 'ASC' normal order (a-z 0-9) (default)
      • 'DESC' reverse order (z-a 9-0)
  • expand
    • The symbols to be used to mark expanding and collapsing. Possible values:
      • '0' Triangles (default)
      • '1' + -
      • '2' [+] [-]
      • '3' images (you can upload your own if you wish)
      • '4' custom symbols
  • customExpand
    • If you have selected '4' for the expand option, this character will be used to mark expandable link categories
  • customCollapse
    • If you have selected '4' for the expand option, this character will be used to mark collapsible link categories
  • postTitleLength
    • Truncate post titles to this number of characters (default: 0 = don't truncate)
  • accordion
    • When set to true, expanding one category closes all others at that level
  • catfeed
    • Whether to add a link to the rss feed for a category. Possible values:
      • 'none' (default)
      • 'text' shows RSS
      • 'image' shows an RSS icon
  • taxonomy
    • Type of taxonmy to display. Possible values:
      • 'category' (default)
      • 'link_category'
      • 'post_tag'
      • 'both' (categories and tags)
      • any other registered taxononmy (e.g. recipe press uses recipe-categories)
  • showPostDate
    • When true, show the date of each post
  • postDateAppend
    • Show the date before or after the post title. Possible values:
      • 'after' (default)
      • 'before'
  • postDateFormat
    • What format the post date is in. This uses the standard php date formatting codes
  • useCookies
    • When true, expanding and collapsing of categories is remembered for each visitor. When false, categories are always display collapsed (unless explicitly set to auto-expand). Possible values:
      • 1 (true) (default)
      • 0 (false)
  • showTopLevel
    • When set to false, the top level category will not be shown. This could be useful if you only want to show subcategories from one particular top-level category
      • 1 (true) (default)
      • 0 (false)
  • postsBeforeCats
    • When set to true, posts in category X will be ordered before subcategories of category X
      • 1 (true)
      • 0 (false) (default)
  • expandCatPost
    • When set to true, any category to which a post is assigned will automatically be expanded on a single post page.
      • 1 (true) (default)
      • 0 (false)
  • showEmptyCat
    • When set to true, empty categories are shown
      • 0 (false) (default)
      • 1 (true)
  • debug
    • When set to true, extra debugging information will be displayed in the underlying code of your page (but not visible from the browser). Use this option if you are having problems



This will produce a list with: * animation on * categories shown in alphabetical order * using images to mark collapsing and expanding * exclude posts from the categories general and uncategorized


I use this plugin in my blog at http://robfelty.com


Currently this plugin relies on Javascript to expand and collapse the links. If a user's browser doesn't support javascript they won't see the links to the posts, but the links to the categories will still work (which is the default behavior in wordpress anyways)

Requires: 2.8 or higher
Compatible up to: 4.6.2
Last Updated: 5 months ago
Active Installs: 10,000+


4.5 out of 5 stars


0 of 3 support threads in the last two months have been marked resolved.

Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

0,1,0 40,10,4 100,3,3
0,4,0 67,6,4
100,1,1 56,9,5
100,2,2 0,3,0 75,4,3 67,6,4
57,7,4 100,1,1
0,4,0 100,1,1
0,4,0 100,4,4