CollapseIt
Current Version: 1.1.2
CollapseIt is a small WordPress plugin that automatically adds a JavaScript function to toggle the visibility of any element that has an ID by providing the ID name.
The plugin also provides some convenience functions to make using the plugin and the JavaScript as simple as possible. The convenience functions also provide a safe fail-over for those users and browsers that do not have JavaScript so that your site continues to be functional to those users who cannot take advantage of dynamically changing styles.
Example time!
1) <li><h2>Archives</h2>
2) <?php cjb_smallcollapseit_link('Click to show', 'archiveList','block'); ?>
3) <ul id="archiveList">
4) <?php wp_get_archives('type=monthly'); ?>
5) </ul>
6) <?php cjb_safecollapse("archiveList"); ?>
7) </li>
That is the exact code (minus the line numbers) that created the Archives item in the default theme that I run (the Kubrik theme does not use the plugin yet).
Here’s the analysis of the important lines (i.e. those that relate to the plugin):
2) Uses a convenience function in the plugin to create a link that will toggle the element's hidden status. It also uses the <small> tag.
3) Opens a new unordered list and sets the id of the list to "archiveList"
4) Great little convenience function to safely hide/collapse the element "archiveList" ONLY IF the user has JavaScript active
This plugin can be used anywhere on your blog, including the Administrative pages. I also urge users to use the cjb_safecollapse() function if its desired that an element start hidden. This way it will not be hidden if the person coming to your page does not have JavaScript.
Let me know if you run into bugs or come up with feature requests.
Version History
- 1.1.2: Added an additional (optional) paramter to the PHP cjb_safecollapse call. Now it is cjb_safecollapse($theID, $startExpanded) and $startExpanded defaults to false. This means that it will work “as expected” without any modifications as a drop-in replacement, but you can specify that you’d like the element to start in an expanded state rather than collapsed if there’s previous history of one way or the other.
- 1.1.1: Fixed the script block so that it validates without warnings as XHTML and fixed the problem with Firefox not setting the show/hide cookie properly.
- 1.1: Sets a cookie for the element to track if it is hidden or not. Now if you unhide an element, it will stay unhidden until you hide it again, or clear your cookies.
- 1.0: Initial Release
Known Bugs
-
The XHTML validator does not like <script> tags to be anywhere other than the head, apparently. I’m working on a fix for this, but it might require a slight tweak to how the
cjb_safecollapsefunction is called. I don’t know that this is actually a bug. Sometimes the XHTML validator is ok with the structure, sometimes it is not. I’m investigating furtherNot a bug, I was placing the <script> tag in my site layout inside a <ul>, which it didn’t like. My example has been appropriately updated to reflect valid XHTML.
- Saving the hidden/shown state doesn’t seem to work in Firefox. It’s not letting the JavaScript set a cookie.
May 26th, 2005 at 3:56 PM
Oh I am *SO* gonna use this. I was trying to think if there’s anything I could use it for on my site and then I noticed that you are using it to hide your archive and category lists. And that is such an excellent idea I think I will do the same!
Can’t wait for the release!
May 26th, 2005 at 4:03 PM
Should be later tonight, actually. I need to actually write the bits that check for JavaScript
May 27th, 2005 at 5:32 AM
Thanks for mailing me when this was ready! It was *SO* easy to set up that I was literally able to do it in about 2 minutes this morning before leaving for work. Seriously, it’s taking longer to post this than it did to set up the plugin!
Anyway, you can check out how I’m using it on my site if you want, it’s in the left sidebar on my site!
My only feature request would be some way for it to remember whether each section is showing or hiding. So like, if I expand my category links, then click on a category link, it would remember that the category links were expanded. Of course, I have no idea if that’s even possible, but it would certainly be neat!
Excellent little plugin!
May 27th, 2005 at 12:32 PM
The XHTML Validator is freaking out on me, too. I’m validating as Strict, but it wouldn’t let me validate it as transitional either.
May 27th, 2005 at 3:20 PM
Melbell, see above in the known issues. The problem was with where I had placed the call that did the safe hiding, not with the any actual code.
That change left everything except the URL that retrieves the Weather.com info as validating properly. I think I’m going to turn that particular plugin off until I figure out how to fix what Weather.com sends.
May 27th, 2005 at 3:30 PM
Ok, I updated the way I called it like in your revised example, but now the validator is giving me trouble about some “&” sign.
This is what it says:
Line 68, column 31: character “&” is the first character of a delimiter but occurred as data
else if(sHideState != null && sHideState != ‘none’)
If you wish to include the “
May 27th, 2005 at 4:04 PM
Ok, sorry to blow up your site with replies, but I have it all validated now in XHTML strict, the “&&” thing is just a “warning” on the validator but it doesn’t negate the validity so I guess I can live with that
Still, if you know of something that will keep it from flagging as a warning then I would love to get rid of those two warnings as well!
May 27th, 2005 at 5:10 PM
I know, it’s a strange little issue that it’s having with the && inside the javascript. I’m loathe to change it to…
else if(sHideState != null){
if(sHideState != 'none')
{
//code
}
}
That’s just ugly. I don’t know why the validator’s choking on JavaScript within a <script> block though.
May 27th, 2005 at 5:18 PM
You could always offer both versions…one “smaller” plugin for people who don’t care about validity.
But like I said, I can live with a warning…the validator isn’t saying it’s WRONG, just a warning. It still validates XHTML 1.0 Strict so I’m cool with it as is.
May 27th, 2005 at 6:19 PM
It’s not size, it’s just code-ugliness
I’m a programmer by education, a past web-developer by trade and a current IT person, so I’ve got this thing against some things. Size-wise it’s, what, a few characters different? I just have to figure out the elegant way to do it
August 3rd, 2005 at 6:48 AM
hi, your ‘collapseIt’ plugin is great! thanks. please can you tell me the code to integrate ‘collapseIt’ for the categories.
is it also posible to the menu like this: collapse option is to show the categories tree like a normal navigation
tree, where clicking on the parent category show’s its click categories. thank you for help. best regards, maggie
August 6th, 2005 at 10:45 AM
(August 3rd, 2005 at 6:48am) - sorry, my e-mail was wrong
i hope, you will help me about my question to your menu ‘collapseIt’.
thank you!
August 10th, 2005 at 9:24 AM
Hi Maggie,
I’ll try to send you out an e-mail tonight. Doing the collapseable tree-view that you’re asking about is technically possible, but I think it may require modifications to both the plugin and potentially the WordPress code.
August 19th, 2005 at 2:06 PM
Ok, the darndest thing. I started another blog (with a different subject) and I installed this plugin, and used the SAME code from my main site but on the second site, the plugin doesn’t work.
The “click to hide” link shows up, but when I click on it, nothing happens. Have you heard of it doing anything like this before?
Sorry I don’t have more information…I can’t fathom why it isn’t working on the second site!
August 19th, 2005 at 2:26 PM
Ok, a new development…another of my plugins doesn’t work in the second blog. My RunPHP plugin doesn’t function at all…I sense a deeper problem
August 19th, 2005 at 3:04 PM
Ok i’m sorry to flood you. It’s fixed. It was my theme. I didn’t have some stuff in my head tags that apparently have to be there for certain plugins etc to work. sorry again
August 22nd, 2005 at 5:20 PM
Hey, no problem Melbell
Glad you got it fixed.
For the sake of the curious, do you know what tags were missing?
July 13th, 2006 at 8:53 AM
I figured out, how to hide the chat.
Chris, why don´t you just delete this one and the last two posts ….
But question 1 is still remaining: How do I start with “show” instead of “hide”?
July 13th, 2006 at 2:31 PM
Hi Simon (I’ll send you an e-mail too)…
That’s actually something I hadn’t considered
I’ll build a new version that lets you pass a “start open” option to the cjb_safecollapse() function. That should take care of it.
July 13th, 2006 at 3:49 PM
Thank you, Chris - for answering that quick and considering my idea.
March 14th, 2007 at 9:52 PM
Great plugin! but, you say: “Sets a cookie for the element to track if it is hidden or not.”
I can uncheck this function?
Thanks!!
July 10th, 2007 at 10:04 PM
Hi Chris, its me again - one year later. I think a year ago you told me via email how to use the “start open”-option and it worked really well. In the meantime I have switched themes quite a number of times and am now using one in which I’d love to use your plugin again, but I just can’t remember what I had to include in the functions to have it start opened … so if you would tell me again that would be much appreciated. Thanks a lot, Simon
July 10th, 2007 at 10:25 PM
Hi Simon, I’ve sent you an e-mail with the info. Actually, resent