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.

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!

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:

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.

  • 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 Good The Bad The Ugly

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.

251 Comments in 13 pages

Go to Comment Form »
  •  ..::DeUCeD::.. said:

    25-11-2009 @ 19:21 [ID:11015]

    [+]

    Hey Brian As i said what this script does is to revert the state of an element. At the example for Lea i have 2 span elements which have different IDs. First span ID is LEA01 which has a display:block attribute and includes a link and an image. Second span ID is LEA02 which has a display:non... ...

  •  Brian said:

    25-11-2009 @ 23:28 [ID:11016]

    [+]

    Hi Mr D, Thanks for the personalised code. Much appreciated. I get the 'switch' now for the images but there is another section of code for the expanding content. That has an ID also. Which 'ID' do I use to tie the two parts together. I have it set to 'divs' and the first thing is a 'div id'... ...

  •  ..::DeUCeD::.. said:

    26-11-2009 @ 13:34 [ID:11018]

    [+]

    If you manage to swap the images then you have no problem. Use the same ID that your image has in its own DIV. You can have multiple DIVs with the same ID and all that DIVs will expand or collapse the same time. You may also put different IDs but then you should put them on the links that expand or ... ...

  •  Brian said:

    26-11-2009 @ 21:11 [ID:11020]

    [+]

    Fantastic!!!!! Got it working!!!!!! Many thanks. I just couldn't work out how to add that third ID. Also, my linking to that website for their images wasn't working!! So I made my own. I'll drop you a link when I have some content. Thanks for excellent comment/plugin feedback. I saw y... ...

  •  ..::DeUCeD::.. said:

    27-11-2009 @ 08:15 [ID:11022]

    [-]

    Wow! Africa to UK!
    I m glad you are a traveller!
    All that is left in our lives is travelling the world :D

    Cheers!

  •  Karuna said:

    03-12-2009 @ 14:14 [ID:11024]

    [-]

    Thanks for this very cool plugin. I am using on my site Used Tractors for sale

  •  Collapsible Notes System « System Organizer said:

    12-12-2009 @ 16:25 [ID:11048]

    [-]

    [...] reference < id="X4002" style="display: none; "> This collapsible notes capability is based on a collapsible elements plugin by DeUced. Information hiding is a useful approach to reduce information [...]

  •  Fredrik Harken said:

    10-01-2010 @ 19:32 [ID:11142]

    [-]

    Hi,,
    Sounds cool!

    One question, is it possible to use this on my footer or footer-widgets div as well?
    I want to have a collapsible / expandable footer so i can show and hide it… Of not, does anyone know a wordpress plugin that i can use for this?

  •  ..::DeUCeD::.. said:

    11-01-2010 @ 07:34 [ID:11143]

    [+]

    From the moment you activate Collapsible Elements you can use it wherever you want in your WordPress. You just have to manually write the code for that. Just put a unique div ID (like "footer" or something) and try to create a similar code like you do in your post. Put your footer in a container and... ...

  •  Daniela Castillejos said:

    02-02-2010 @ 01:16 [ID:11182]

    [-]

    Perfect! just love it!

  •  PopUps said:

    03-02-2010 @ 17:02 [ID:11186]

    [-]

    [...] Collapsible Elements [...]

Post a Comment

Are you a SPAMMER?   YES     NO   (required)