I’m not sure how to do this. My javascript takes advantage of the built in style classes that wordpress uses. I make it very generic and it is not very smart, just collapsing or expanding the current entry.
If you don’t mind editing the code – the collapse-page-and-category-plugin.js file has the symbols listed on lines 24 and 32. They are the HTML entities △ and ▽ (entities 9651 and 9661). Change the code starting with the ampersand and ending with the semicolon to anything you want. Leave the ampersand nbsp; character so there is a space after the symbol.
Some sites have the (+) and (-) or [+] and [-] which should look good and be easily identifiable as expand and collapse.
Thanks Keith for this plugin. Question: is there a way for me to change the triangle icon to something different? I’m thinking of a plus (+) and minus (-) sign to indicate a collapse/expand menu. Thanks again!
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
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’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).
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.
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.
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.
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…
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…
The standard WordPress widgets will use the “children” class automatically. Just install it and it will do its magic on hierarchical links, pages, etc.
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?
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!
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, 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.
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.
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
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?
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.
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.
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.
Thanks again for your support and efforts with this plugin!
I’m not sure how to do this. My javascript takes advantage of the built in style classes that wordpress uses. I make it very generic and it is not very smart, just collapsing or expanding the current entry.
Keith
Thanks Keith. That’ll do it!
One more question: How would I make the entire category link clickable to expand the menu rather than just the symbol before the category link?
If you don’t mind editing the code – the collapse-page-and-category-plugin.js file has the symbols listed on lines 24 and 32. They are the HTML entities △ and ▽ (entities 9651 and 9661). Change the code starting with the ampersand and ending with the semicolon to anything you want. Leave the ampersand nbsp; character so there is a space after the symbol.
Some sites have the (+) and (-) or [+] and [-] which should look good and be easily identifiable as expand and collapse.
Keith
Thanks Keith for this plugin. Question: is there a way for me to change the triangle icon to something different? I’m thinking of a plus (+) and minus (-) sign to indicate a collapse/expand menu. Thanks again!
You click the triangle icon to collapse the category.
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
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
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).
There was a typo. I fixed it.
Please download again. (I did not make a new version).
Thanks,
Jim
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="”>
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
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.
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…
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
Try downloading one of the earlier versions. I added the down arrow in the latest release. The others worked differently.
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.
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
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
man i really loved the new update about the triangle!! thanks man!! ^_^
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!
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.”
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’d have to set a cookie. I will see about doing that.
thanks for the idea,
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.
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
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
Upgraded to 1-2 this morning and the function doesn’t work on my website any longer.
Reverting to 1-1
Your plugin doesn’t collapse category in wordpress. but expand category in wordpress.
https://downloads.wordpress.org/plugin/collapse-page-and-category-plugin.1.1.zip
In the mean time, I will check why it is not working.
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
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,
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.
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.
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?
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.