Posted at 10-12-2007 @ 18:13 by ..::DeUCeD::..
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.
- Installation ↓↑
- Upgrading ↓↑
- 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 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.
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:none attribute and also includes a a different image but the same link.
Cause that link in both cases reverts the state for both spans! If you press it then what is block becomes none and vice versa. Thats only a trick to make appear another image in the place of the first one etc.
Push the GREEN button to see the hidden text.
Now Push the RED button to hide it!
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’ – this normally is an Xnumber that ties up with the section above.
I’ve been hammering this since you posted back to me, and I can’t get the content to expand by using the code you gave (the images swap nicely though and your normal code works).
Thanks
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 collapse the elements (as i do in the example that follows). Its your decision depending on if you use the ID for something else. Have different IDs is a better solution having your code html compliant but that’s not a big deal.
I ll try and give you an idea here also putting the code to understand it better. I use a third NEW ID for the last line but i also put it in the expand link so it ll be opened when i click the green button and will be close when i click the red one.
And here’s the result:
Push the GREEN button to see the hidden text.
Now Push the RED button to hide it!
Hitting the Geen button will also open a new text BELOW this line…
That text is shown only when the GREEN button is clicked
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 your adventures in your Lada. I drove a Land Rover back from Africa to UK.
Have fun in the future.
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
Cheers!
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 [...]
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?
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 make a link whatever you want and it ll work.
02-02-2010 @ 01:16 [ID:11182]
Perfect! just love it!
PopUps said:
03-02-2010 @ 17:02 [ID:11186]
[...] Collapsible Elements [...]