When I made Collapsible Comments plugin I was thinking that it would be a great idea to make elements on a post or page to collapse and expand by demand.

Till now, I could only achieve it by using the Collapsible Comments code, along with it’s basic usage, to have collapsible comments. But then i thought, why not trying to have a button in my editor to give me the code when needed it instead of copying and pasting all the time? And why not having an independant plugin just for collapsing blocks in a post? That’s how i made Collapsible Elements plugin!

Collapsible Elements version 2.2
Updated @ 21/07/2008
Download Collapsible Elements
(from the Wordpress Repository)

• Description

Collapsible Elements adds a button to the code editor which creates the code for having multiple collapsible elements in a page or post. It’s a really simple plugin which can help you making long posts smaller and smarter with style.

• Usage V2

Right after the succesfull installation go to your dashboard and you ll find an option page under MANAGE named XCOLLAPSE. Choose a container from TABLE, SPAN or DIV and then write down a default style in the box. After that UPDATE and your options are saved till next time you ‘ll need to change them.

• Screenshot1 ↓↑ XCollapse Options (under Manage in WP 2.5.X)

Then, you can see a new button at the CODE editor with the name XCollapse. Now you can click it wherever you want inside a post and it will bring you the code for a collapsible element which is divided in two parts, a code for the link and a code for a collapsible element which will be in the “container” you ‘ve just set. All you have to do is replace the sentence “REPLACE WITH LINK ELEMENT HERE…” with your own words. Then replace the sentence “REPLACE WITH COLLAPSIBLE ELEMENT HERE…” with anything you wanna have collapsed. It could be an image or a paragraph or whatever you have in mind. You could also try to style the table if you dont like it transparent. Save and preview whatever you just did!

• Screenshot2 ↓↑ Write a Post (CODE Editor)

Note the xcollapse function and the ID, both of them are important (and also see the display: none attribute at style which it will hide the container’s data by default). Now watch the result by clicking the following link:

• Example ↓↑ Click here to expand the collapsible element

After puting the code of a collapsible element in the CODE editor you could then return to the VISUAL editor and continue there. The code editor will just have the button and the code. Whenever you want to put another collapsible element go to the code editor and repeat the proccess. If you wanna change the style of a collapsible element you can correct it in html editor or create a new default style (or container) under manage in XCollapse Options page.

• How does it works

First it generates a random number ID which will be used marking the id’s of the collapsed elements. That number is important because it must be unique in the same page/post. Then it creates the needed code with a link and a container for the data we wanna have collapsed. I can have whatever I want inside the container and I can also create multiple collapsible elements in a page or post each time i use the XCollapse button.

In version 2.X i decided to make an option page under Manage because some of you preffered DIV’s instead of tables and wanted their own default style to use. Can be easily changed for individual posts anyway or set a new default container/style each time is used.

• Important Note

If you ever uninstall Collapsible Elements plugin the collapsed data in your posts will be hidden until you change the “display: none” attribute of container’s style and remove the link.

• Installation ↓↑

• Upgrading ↓↑

• Uninstallation ↓↑

• Requirements – Compatibility ↓↑

• FAQ ↓↑

• Credits

Collapsible Elements plugin is based on the Javascript i found on Arvind Satyanarayan example which toggles the visibility of multiple elements on a page, see the code in his website. I also used a function to insert a quicktag button which was taken from the Iimage Browser plugin and the edInsertContent function which is included at quicktags.js file and was made by Alex King. At last i wanna thank Matteo for his comment.

PS: See a more complicated use of Collapsible Elements plugin as an example with three collapsible links inside a fixed table to simulate 3 text collapsible columns.

The last example had parts of the Declaration of Independence of Cyberspace.

Last Note: Collapsible Elements plugin is aiming to those webmasters who wanna have more capabilities formatting the expandable content in many ways. But if you find it too complicated for you and you just want something more simple, i suggest that you also try Collapsing Objects plugin of DrLebowski. If you like it tell him that ..::DeUCeD::.. thinks that VFR is *not* a bike but feels more like a “washing machine“. Real bikes *DO NOT* have a fairing but lets you fight the wind alone… ↓↑

ADD-ON
Thunder-man has created a small handy portable version of a script that can generate the code for Collapsible Elements named CE-Generator! More info and download can be found on it’s page.