This plugin installs some javascript in the footer of every page. Javascript detects any list items with a class of ‘children’. It hides the children in the tree and sets a click event that will expand or re-collapse them. The action uses only css and javascript and occurs after your page loads, so that search engines will see the whole tree before it is collapsed.
WordPress uses the ‘children’ css class when it displays pages and categories in unordered lists, but you can put anything in an unordered list with a css class of ‘children’ on the child UL tags and the javascript will collapse or expand it for you.
Note: The plugin will not work with themes and widgets that overwrite the default behavior of WordPress.
There are no configurations options. The plugin is on when it is installed and enabled. To turn it off just disable the plugin from the plugin menu.
Donations:
If you find this plugin useful and you wish to support me, you can buy my book of short stories (cheap) Error Message Eyes: A Programmer’s Guide to the Digital Soul
At the very least please visit my websites and, if appropriate, add a link to one on your blog:
Blog's Eye (My WordPress Plugins and other PHP coding projects)
Wandering Blog (My personal Blog)
Resources for Science Fiction (Writing Science Fiction)
The JT30 Page (Amplified Blues Harmonica)
Harp Amps (Vacuum Tube Amplifiers for Blues)
West Nyack Honey (I keep bees and sell the honey)
Download
Latest version: Download Collapse Page and Category Plugin v1.5 [zip]
Installation
- Download the plugin.
- Upload the plugin to your wp-content/plugins directory.
- Activate the plugin.
FAQ
Changelog
1.0
- initial release
1.1
- Fixed problems with WordPress 3.0 release
1.2
- Changed so that categories will collapse and uncollapse
1.3
- Bug fix for IE
1.4
- By popular demand I added the triangle character that is clickable. It works better this way.
1.5
- Added a fix to allow category to remain uncollapsed in current page when moving from section to section. (Thanks Jette!!)
- Separated the javascript into a static file. Fixed typos (again thanks to Jette).
Hi there. I seem to experience a problem with the collapse cat and page plugin which you might be able to give some advice about: I use a standard install of WordPress 3.0.1 with no fancy stuff so far. I did install the WPML multilingual plugin, which is the only plugin up to now. When I activate the Collapse Cat plugin now it does nicely hide the children, but whenever I klick on a parent though, nothing happens. I can’t reach the corresponding page and the children are still hidden. I figured out though that if I klick right next to the cat name (to the right of it) it shows the children, but still no link in my cat tree is working… Has anyone experienced such too? Any advice?
Best regards c.
Since there were no screenshots of the plugin linked within the plugin install pages, I was hoping to see it functional on its own website, or at the very least, some screen grabs to help me see what it looks like.
Can you please do that?
I love your plugin – I had a lot of trouble finding one that would work with category lists on pages.
Everything works like a charm except after I expand a parent link and it lists the children. The next click on the parent goes to the parent’s category page instead of collapsing the branch.
I wish I could figure out a way to make the expand and collapse work on triangle icon. That way it would work as a switch and if someone wanted to go to the parent’s category page, they could.
Anyway, great plugin – I have taken a look at your others – interesting.
Hi,
Thank you very much for this plug-in. It is what I have been looking for. I am facing an issue however, and request your assistance for the same.
After installing and the plug-in, a new entry appears in the setting – ‘page collapse’, indicating that the plug-in is indeed in place. However, there is no corresponding widget to be seen in the widgets screen. How do I make use of the plugin for the front-end?
Your guidance and direction is much appreciated.
Thanks in advance.
It works for all the standard widgets. You don’t need a special widget to make it work.
If your sidebar has a hierarchical display of pages then it will appear collapsed.
Hi,
i’ve just updated to 1.2 Collapse Page and Category Plugin and it seems not to work.
Where can i find the 1.1 version wich worked nice for my site.
Thanks
http://downloads.wordpress.org/plugin/collapse-page-and-category-plugin.1.1.zip
In the mean time, I will check why it is not working.
Your plugin doesn’t collapse category in wordpress. but expand category in wordpress.
Upgraded to 1-2 this morning and the function doesn’t work on my website any longer.
Reverting to 1-1
Hello Keith and others:
I had version 1.3 installed in wordpress.org Evolve and it worked well.
In a testing phase, I now have it installed in wordpress.org Fusion. It is not functioning quite right. When you click on a parent key, the the children do not become indented.
Any suggestions?
Thanks
Vernon
Themes that change the styling or the structure of pages will break this plugin. I don’t have these themes installed so I can’t tell exactly what they did, but I would suggest that they changed the class name for unordered lists.
Keith
Hi, love the plugin but I was wondering if there was any way to make the menu state persistent across pages. I.e. if I expand a category and click on a link, the expanded menu would stay open when the new page loads. Right now it closes back to its original state, which I guess is logical, but it would be great for navigation on long lists if the menu would stay open! Thanks for a wonderful job.
I’d have to set a cookie. I will see about doing that.
thanks for the idea,
Keith
Wonderful! I hope you implement it fast, can’t wait to use it you see! I’ll keep my eyes glued to this page
I agree with Neal word for word who had a post on 12/6/2010 so I will just re-iterate and hope this will be available in the next release.
“I love your plugin – I had a lot of trouble finding one that would work with category lists on pages.
Everything works like a charm except after I expand a parent link and it lists the children. The next click on the parent goes to the parent’s category page instead of collapsing the branch.
I wish I could figure out a way to make the expand and collapse work on triangle icon. That way it would work as a switch and if someone wanted to go to the parent’s category page, they could.”
Hi Keith, I just got your update today and it looks beautiful. Thank you so much, my users are going to love it! The triangles let the user know that there is additional content and allows them to expand or collapse it as needed. Awesome! Perfect!
man i really loved the new update about the triangle!! thanks man!! ^_^
Hi there,
Lovely plug-in. I’ve been looking for one like this, but since I am new to this, can someone please post or link me to a detailed guide to use the plug-in. Where shell I write “children”?
Are there any pages with examples of this plug-in?
Please excuse me for this, but I am total newbie.
Best regards
The standard WordPress widgets will use the “children” class automatically. Just install it and it will do its magic on hierarchical links, pages, etc.
Keith
Can you please advise how to make category names expand/collapase instead of being links.
On my website I have country-province-suburb categories in a hierarchy.
Your plugin works perfectly, and works on a theme (pagelines) on firefox where wp-dtree did not!
However, I want somebody to click on the country category name without having to click on the down icon to open the category to the child.
In my instance I only want the grand-child nodes to be clickable, any help or pointers in the right direction would be highly appreciated.
Try downloading one of the earlier versions. I added the down arrow in the latest release. The others worked differently.
Keith
Hi, Keith – finally a plug-in that doesn’t bring 100+ unnecessary options that blow up the code and doesn’t do a thing when you have other plugins installed, use mootools or spaces in category names
One thing though – is there a way to show the triangle AFTER the category name and not before? That would look so much better in my theme…
Greetings from Germany – Gabi
Hi
I really like your plugin. I have tried others, but they don’t work or have too many options.
I am only missing one thing. When a link in the menu is clicked, the page is reloaded and the menu is collapsed. It would be nice if the menu could stay expanded where the user clicked…
I have made a tiny change to the script, to make sure the menus stays open at the current page, when the website is reloaded.
I hope Keith will add this fix to the plugin, since it is quite essential imho.
Open the php file of the plugin (collapse-page-category-plugin.php) and locate the javascript function called “kpg_colpage_action(event)”. Within that function locate the line that says “p.innerHTML=clicker+p.innerHTML!”. Immediatly after that line, insert the following:
var m = p.className.match(/current_page_/);
if (m !=null) {
b[i].style.visibility=”visible”;
b[i].style.display=”block”;
}
Thats it!
I also noticed that the style attribute “visibility” is misspelled in two places. So you may want to correct that too.
Jette, Thanks,
I’ve made the change. The only problem that I have now is that it takes a long time for some of my pages to load, and the menus don’t collapse until the onload() event fires.
The 1.5 version of the file will appear at the repository as soon as I do just a little more testing.
Keith
Hi,
Love the plugin so far… just installed it a week ago.
The new version appears to leave a trailing “<" character after generating some code. Right before the "collapse-page-category-plugin.js" javascript call. In the
collapse-page-category-plugin.php file as seen below.
<<script language="javascript" type="text/javascript" src="”>
There was a typo. I fixed it.
Please download again. (I did not make a new version).
Thanks,
Jim
Hi Keith
I’ve made a few more changes to the action function (see my comments at the end of this message):
function kpg_colpage_action(event) {
try {
//Get the sidebar
var sb = document.getElementById(‘sidebar’);
// right triangle is ▹
// filed triangles are one less than open ones.
var clicker=’▽ ‘;
var noclicker=’▽ ‘;
//Get the contents of the first element in the sidebar, which contains the menu
var uls = sb.getElementsByTagName(“UL”);
var b = uls[0].getElementsByTagName(“UL”);
for (var i=0;i<b.length;i++) {
// make parent clickable and the child no display
if (b[i].className=="children") {
// search for parent li – check a few times incase the ul tags are heavily formatted
var p=b[i].parentNode;
b[i].style.visibility="hidden";
b[i].style.display="none";
// set the p object with a character before with a click item attached to it.
p.innerHTML=clicker+p.innerHTML;
var m = p.className.match(/current_page_/);
if (m !=null) {
b[i].style.visibility="visible";
b[i].style.display="block";
}
}
}
var c = uls[0].getElementsByTagName("LI");
for (var i=0;i<c.length;i++) {
var p=c[i].parentNode;
if (p.className == 'nav') {
if (c[i].innerHTML.match(/children/) == null) {
c[i].innerHTML=noclicker+c[i].innerHTML;
}
}
}
} catch (ee) {}
}
1) I have limited the for loop to iterate elements only in the sidebar, instead of the complete page.
2) Items with no children is indented to align them with parent items (I simply added an invisible triangle).
I don’t want to limit the action to just the sidebar. This plugin will also collapse menus added by shortcodes or themes. Limiting to the sidebar may speed it up, but might break some special functionality (not likely, but possible).
I’ll try out the indent code.
Thanks,
Keith
thx for the plugin!works great!
concerning the pages when you click it expands. Any hints how to collapse it if you click again the primary page link?
thanks