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.
03-09-2009 @ 02:29 [ID:10920]
Hey just wanted to say big love for this plugin. spent all day fiddling round with another one that still doesnt work. this one worked first time no probs. legend mate!
03-09-2009 @ 14:53 [ID:10921]
Hi. Just wanting to know. Is it possible to have the link that toggles the show/ hide of content as changing images? For instance, at default mode, it shows a “+” sign indicating click to display content. And when clicked, the link shows a “-” sign referring to content will be closed/ hidden when clicked. Is it possible? If so, could you assist me on this? Thanks… much appreciated.
Regards,
Lea
-Malaysia-
04-09-2009 @ 11:07 [ID:10922]
Hey Lea just replace the [+] and [-] signs with any image URL and here’s an example with a green and a red button, PUSH THE GREEN and you can see the hidden text, PUSH THE RED and it ll be gone:
Push the GREEN button to see the hidden text
Now Push the red button to hide it!
Right click on this page and see the source code. Try to find these lines “CODE 4 LEA start” and “CODE 4 LEA end”, copy the piece of code among these lines in a notepad and see how i just put images URL instead of text links. Adjust what ever you need. If you have any troubles let me know…
06-09-2009 @ 16:39 [ID:10923]
Thanks for a great plugin. Have tested it and it works great. Have one question. Is it possible to make it expand on hover instead of on click?
07-09-2009 @ 07:35 [ID:10924]
Well, right now the plugin is setup to use onClick javascript function. So it reads the state of an element and then change it when you click the link. If you can alter it and use onMouseOver function it *may* work but i havent test it and i cannot be sure.
07-09-2009 @ 14:44 [ID:10928]
Thank you so much. It worked great.
27-09-2009 @ 14:44 [ID:10971]
Hi! i’d really like to use this plugin on my blog, but i’m running v2.8.4. There’s no “Manage” tba here, and i can’t seem to find any page where i can configure the plugin.
Is it possible to use this plugin with this version? (And if not, would you consider updating it?
Thanks!
- Ryan
27-09-2009 @ 16:21 [ID:10972]
Hey Ryan
In WP 2.8.4 go under TOOLS. You should see there XCollapse link. The instructions are pretty old and some things have changed since WP 2.7 new layout so try once more. But it does work with the latest WP
27-09-2009 @ 17:01 [ID:10973]
Hi,
I love your pluggin! I’m trying to make it work with a custom wp design I’ve been making but it’s not working. I know it’s not the version of wordpress I’m running, as I’ve checked the default themes and the plugin works fine with those. Is there anything I should be adding to other parts of my scripting to make it work?
27-09-2009 @ 23:44 [ID:10974]
SOLID GOLD! It works beautifully. Excellent job on this. Thank you SO much – it’s exactly what i was after.
-Ryan
28-09-2009 @ 07:52 [ID:10975]
Hey Justin
I think that it should work with any theme. There might be possible conflicts with other plugins using javascript but thats a rare case. Before going any further did you develop the theme you are working with? Do you have get_header function in theme’s pages? If you have the plugin activated check one of you post and see the source code. You must be able to see a couple of lines about collapsible elements javascript in the head section. If you also have a link let me know and i ll take a look.
15-10-2009 @ 04:37 [ID:10985]
Hello!
Is there a way to only keep one item un-collapsed/open at the time?
For an example, say that I have two items, A and B. I un-collapse/open item A. Then, when I click on item B, not only would I like item B to un-collapse/open but also for item A to collapse/close.
Is this doable?
Thanks / Arvid
16-10-2009 @ 16:31 [ID:10986]
Hi,
I’m using this code on this page: http://www.philpott.ca/about-us. Just wondering if you can tell me how to make it so that the +s and -s I’m using are on the same line as the headers?
19-10-2009 @ 09:01 [ID:10988]
Hi Arvid,
Collapsible Elements is only a simple script that reverts an element condition. So if a page element is shown the link will hide it and vice versa. There are lots of other javascripts that reads all block and can leave open only one closing all other elements but that was not the purpose of this plugin which aims to be a simple and lightweight solution to produce the show/hide effect.
Furthermore as a user i wouldnt want to close all except of one because i might want to read one hidden section and let it open to read the next one, example is the comments here, thats why it works this way. So i m sorry but as it is now you cannot accomplish that.
19-10-2009 @ 10:03 [ID:10989]
Hi Sean,
What you got there depends on you and the html code that you use. First of all the image you use has a certain height, then you use heading for the name. I ve just put the image along with the name like that:
Then i added align=”top” to the image properties
The point is that you can do what you want trying all the html goodies are out there (like a span) and play with padding or marging. I cant give you specific instruction as its something thats up to you.
PS: I ve also noticed that you ve taken collapsible comments code and use to produce the summary. Have in mind that you may not have CCstyle class defined in you CSS (and you probably dont need it).
21-10-2009 @ 19:55 [ID:10990]
I can´t see the button XCollapse in my edit page. I have WP 2.8.4.
I configured the design for the expand, but when i try to add it in my pages i dont know how…
Can you help me?
22-10-2009 @ 08:22 [ID:10991]
You should see the button IF you use the HTML editor, NOT the visual editor that most users work with. If Collapsible Elements plugin is active check your source code of your blog index page for that term. If you see it its there and you can use it even without the button. See Screenshot 2 above and try to write the same code in a post.
Top 1000 WordPress Plugin Authors « Metode de promovare said:
06-11-2009 @ 20:50 [ID:11002]
[...] Collapsible Elements [...]
15-11-2009 @ 22:14 [ID:11010]
Amazing – exactly what I was looking for, and works just as it should. Thank you so much!
25-11-2009 @ 18:58 [ID:11014]
Hi DeUCeD….
Top plugin my friend.
A quicky if I may. Looking through peoples source code to suss out my own problem (I’m trying to do the green and red button demo you did above for Lea) and I don’t seem to have two sets of labels for my expanded section/paragraph so I can’t make an open/close image.
I have it set on Div and the text links work fine. But I have no + or – images.
In Lea’s demo you mention LEA01 and LEA02 – where does the extra xcollapse(‘number’) come from?
Thanks, hope I’m not being a divvy (I’m on the latest WP).