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.
PS1: A button example which can be used to replace or hide or reveal text!
Push the GREEN button to see the hidden RED text.
PS2: 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.
22-02-2010 @ 10:10 [ID:11245]
I don’t think that this is possible. Collapsible Elements hides/shows things that are in the same webpage. They exist there but they are hidden. Subpages are different posts so they cannot be shown. You can only have one page with lots of shown/hidden sections but all of those must be in the same post/page.
25-02-2010 @ 21:24 [ID:11246]
Thank you very much for this fantastic plugin and your help… Take a look at the site now! http://www.fortourism.it/
Hi!!
25-02-2010 @ 21:38 [ID:11247]
Great!
As a matter of fact i ‘ve been thinking of having some more of my widgets collapsible like you did. But i m not sure that it ll fit my design. Any way i ‘m glad it worked for you!
Best regards.
03-03-2010 @ 14:29 [ID:11260]
hey! I have a question. if you have more collapsible elements on one page, is it possible that the others close down when you expand one? thanks very much. mak
03-03-2010 @ 20:03 [ID:11261]
If you have only two elements then one should be open and the other should be closed so when assigning the ID’s in the links their condition should be reversed whatever link you have to press, like this:
Link#1 Link#2
FIRST COLLAPSIBLE ELEMENT #1
SECOND COLLAPSIBLE ELEMENT #2
So as you see any link will change condition of all elements between shown/hidden. Collapsible Elements is used to change the condition of an element between show/hide, whatever that is without examining it first.
But, if you have more than two elements, things are getting complicated because you must do something and let the script know the condition of each one. That requires javascript knowledge and it’s not just 2 lines of code. If you need something like this you ‘ll have to search for different scripts that do that job. But then again I ‘m not sure what you have in mind and what you want to achieve. If you wanna make a menu or something i wouldn’t suggest it. If you wanna do something like a FAQ page there are tricks that you may try with collapsible elements. Anyway it depends on you.
03-03-2010 @ 21:19 [ID:11262]
Thanks. You can check my problem here http://www.fanfara.net/o-fanfari/ekipa
I have names of the teams on the left and the content is shown on the right. what I would like to achieve is when i click on one team that everything else would close down (if previously open). because now when you click, the page is just getting longer and if you don’t know what is going, you think that buttons are not working. u see my trouble?
if you have any other script or an idea how to sort this i would be very grateful.
tnx in advance.
03-03-2010 @ 21:40 [ID:11263]
Yeah, I see what you are up to. What you need is dynamic ajax content, a place where will be updated every time you click on something. I ve made this using Dynamic Ajax Content script which it works in my Shout Stream plugin. That’s how the radio stats are refreshing without loading a new page.
It’s a lot of work to convert it to a plugin but you can go there and take a look and see how it works. I think that it can be done. It’s not easy to implement this but it would fit your needs and then you could have links which would update one DIV of your choice with any content that you like. So i suggest you try it and make it work in your WordPress or search for similar scripts.
Update: You may also search for switch content script in dynamic drive scripts and see what fits you better!
04-03-2010 @ 18:29 [ID:11264]
Anyway to display the first item in its expanded state, instead of being collapsed by default? Please help! Thanks.
04-03-2010 @ 21:42 [ID:11265]
Yeah, there is, instead of display:none; you must enter display:block; and that would show an item expanded.
10-03-2010 @ 19:00 [ID:11273]
having a little trouble getting line breaks and simple formatting of text within the element. I see in your tutorial that this is possible. how do you style it. list items and tags dont seem to work for me.
12-03-2010 @ 13:02 [ID:11275]
They do work but all those elements are tight with your theme CSS file. You have to experiment with CSS and find the solution by yourself. Unfortunately i cannot examine each theme and find the problem.