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.
14-12-2007 @ 14:08
Cool! I’m using it! keep it up! Love u!
13-01-2008 @ 20:34
Hello
I slightly changed the function xcollapse (in ccomments.js) as follows
I just inverted the logic of the second if statement, so that instead of checking for “none” it will check for “block” as a display value, and if “none” or nothing is found it will assign the value of “block”.
Note that nothing is what the function would find if the style attribute were not written in the html, but in a css.
This little tweak solves what you were probably referring to as “the double-click bug” (the first mouse click wouldn’t produce any visible effect, yet it was actually assigning the value of “none” to the element) and it allows to add the style information in a separate css file (such as the theme’s style.css) instead of hard-coding it within a post/page.
However, thanks for the plugin, it’s very handy! Next step would be to make something dumb-proof, something that doesn’t require users to copy-paste any code..
13-01-2008 @ 20:42
Seems useful Matteo, I ‘ll have to test it and think about your change.
I’ ll get back to you soon.
BTW, the “double-click bug” was fixed with v.3.1 and it was caused by an extra DIV i had to the .php file.
Thank you for your comment.
14-01-2008 @ 13:33
Well Matteo, i tested it many times and it worked but didn’t seem to make any difference.
As i said the “double-click bug” was fixed with v.3.1 and you can always add style information in a separate CSS file instead of hard-coding within a post.
On the other hand your solution may seems more logical assigning the value of “block” if nothing is found. So i ‘m gonna adopt it to the next release (and add you as a contributor if you don’t mind).
Thanx again.
02-03-2008 @ 09:51
Hi
Is the colpase just for blogs. Is it possible to use in html?
It’s really cool, I lik it
Keep up doing great things
j
02-03-2008 @ 15:13
Hey Jones,
You can easily use it in html page. The easiest way is to take the plugin and save it somewhere. Find the javascript file within it, open it and copy it somewhere in your HEAD section of your html page just like any javascript you place in an html document, example:
Then put the link code anywhere inside the html BODY but with a unique number as an “id” of each element you want collapsed (example code is screenshot2 at this post). The only difference is that you have to manually enter the link code and you put the unique id’s by yourself. If you find any difficulties i can make for you a sample page to see its source code.
04-03-2008 @ 12:21
thks, very nice plugin.
14-03-2008 @ 15:27
I’m just curious why you used the <table> element instead of a <div> for your container. Without looking at the full code yet (which would probably make it somewhat evident, even to a non-JS writer like me), would it be possible to edit this to take advantage of DIVs (or SPANs) instead of a table?
14-03-2008 @ 15:34
Changing TABLES to DIVS would be a piece of cake but WP isn’t always “nice” to them. I think TABLE are (in a figure of speech) “safer”. But you can easily modify the plugin to suit your needs!
Thx
14-03-2008 @ 19:39
Very nice plugin. But is it a way to make it unobtrusive : showing the collapsing elements when Javascript is desactived instead of hiding them ?
14-03-2008 @ 23:28
Very cool, thanks !
I wish I could track what people are clicking…
Tal.
15-03-2008 @ 08:12
Pierre the Javascript function toggles the visibility of an element between two conditions: it does the show/hide and also the “container” (DIV, TABLE, SPAN, whatever) has to have a default attribute.
Now if JS is disabled the link of the hidden element, which shows or hides it, won’t work BUT the element itself will be already in a default state of hidden or shown (none/block).
The only solution would be to have the “display” attribute as a php variable BUT executing php in a post is beyond the purpose of this little handy plugin which is basically a tool for those using collasible elements and don’t want to copy/paste a code all the time.
Unfortunatelly I cannot do anything for visitors having javascript disabled because they cannot even read this comment!
15-03-2008 @ 08:17
[...] Collapsible Elements (tags: wordpress plugin) [...]
18-03-2008 @ 16:07
Can I somehow trigger my hidden table to become visible when the page loads by putting something in the url?
ie: I have my comments hidden by default. When someone opens the comments and then adds a new comment, wordpress redirects them to the post page where (presumably) they would see their new comment. However, the comments block is now hidden again… I’d like to have the comment block open automatically on the redirect.
Great plugin.
18-03-2008 @ 16:29
Well Travis i think that it can be done. I have something in my mind but i want to test it first. I ll post an answer soon and i will also send you an e-mail about the solution. That may be a standard feature in next release. But i have to test it first (and also that’s something for Collapsible Comment plugin and not Collapsible Element.
)
19-03-2008 @ 01:46
I installed this plugin but as yet have not gotten it to work correctly. When hitting the link to expand what is hidden it just jumps to the top of the post vice opening.
This post has an example.
19-03-2008 @ 10:32
Hey marc
I did saw your page and the code seems right. I made a test blog with same theme as yours and activated some of the other plugins i saw that u use like bad behavour and ubernyms. Everything was working.
So i can only assume that Collapsible Element Javascript file is maybe broken. Please download the plugin again, deactivate it, replace the folder collapsible-elements in your Plugins directory and activate the plugin again.
Let me know how it goes.
PS: And please note that there should be 3 files in your collapsible-elements folder, 1. collapsible-elements.php, 2. readme.txt and 3. xcelements.js, do also a check if they exist.
19-03-2008 @ 11:46
Yep, that was it. I think the js file may have been corrupted, a delete and reload cured the problem.
19-03-2008 @ 11:48
I ‘m glad you solve it
19-03-2008 @ 20:30
Hey Deuced. About expanding a hidden element from the url…
For testing, I tried making a separate php file that pulled in the required wordpress and collapsible elements files, redirected the page and then executed the xcollapse(). But as I’m an extremely rusty programmer, and learning as I go I couldn’t make this happen.
So I tried a different approach by adding a bit to the xcelements.js code. Something along these lines:
then pass it to the site http://domain.com/#newcomment?commentbox1
I was hoping that when then script was loaded in the this would automatically run the code to open the box and then jump to the new comment.
(and also that’s something for Collapsible Comment plugin and not Collapsible Element.
)
I’m not just collapsing each comment, but the entire block of comments at once. I figured that was more of an “element”.
19-03-2008 @ 20:33
had some tags that got lost in the above comment that make it confusing looking.
–execute the script from the head section.
19-03-2008 @ 22:27
Hmm… Let me stick ‘em all together. You are using Collapsible Elements for the whole comment block BUT you want the last comment to be visible.
Before we go on and without having to reinvent the wheel i would suggest to take a look at “Hide or Show Comments” plugin of José Lopes. It does show/hide for the whole block of comments and you may find his approach better.
Now if I wanted to experiment with Collapsible Elements for the whole block of comments and make the latest one visible, I think I would add a second similar function to Javascript file with a name like “Xpand” (or something) which wouldn’t toggle between 2 states (block/none) but in any case would toggle anything to “block”.
Now all i have to find is a condition to call it, for example, if i knew the ID of the next latest comment ID I could easily pass an IF to the php. It’s just an idea and needs testing. As far as i know WordPress increases by 1 the comment ID so maybe the IF statement could look something like
So when someone would post a comment, then in the page after submit THAT only comment should use the Xpand function while the rest would be collapsed. But which is the latest ID and what happens if the same user goes to another page? (lots of other questions follow…)
One other way is to play only with javascript maybe using the OnClick in which would activate the new second function.
As you see that was NOT a code but just an approach to have different behavior to multiple elements. In anycase i cannot give you a simple solution but only a way to experiment (and maybe make you develop a better plugin than mine
). Collapsible Elements plugin is a tool to show/hide elements, I made it for elements inside a post or page but I also see it as “swiss knife”. So use it, experiment and let me know how it goes…
20-03-2008 @ 21:37
Again thanks for assisting in finding the js file error, the plugin works great.
One last question, being far from an expert code monkey I have not figured out how to style the table for this plugin. I note your style that would work with my WP-Premium theme but have been unable to master the code.
If possible could you post the css as you have it styled on this page?
20-03-2008 @ 23:47
Can it be used in the sidebars?
21-03-2008 @ 08:56
Hey Marc I’m gonna give you a basic code but you r gonna have to experiment yourself for having the exact results that will match your theme in your blog.
First of all you have a white background so i would let the background color of the table transparent. Then i would put a thin border with that lime green (#74a021) you have on links or like the blue one (#9999cc) like the text on your sidebar. I would also have padding about 10 to make the text look better inside the table. I can also see that text is justified so i would make the same thing inside the table.
So I would use something like this:
CLICK THAT LINK HERE…
Boyer has worked in the engineering department at HoF since December and was previously a crew chief at Ganassi for Sterling Marlin for the last six races of 2004 and the entire 2005 season.
Meanwhile, there was a bit of real stealing going on down Suwanee, Georgia way. Last Friday, Officer Joe Burnette arrested the driver of a silver Jeep Liberty for running a red light.
Which was produced by the following code:
In this example i used #FFFFFF as value of table’s background color because i do not have a white background, you can use whatever you want but transparent as a value would look nice in your theme. But that’s only a basic example, change the values and experiment. You don’t have to use a super freaking code, just basic values.
After finding what’s suits you then save the code somewhere so you can easily paste it next time you wanna use it. Till next version of Collapsible Elements where you could save the code you usually use and have it ready when u use the plugin!
21-03-2008 @ 10:27
Hi Beth
As i ‘ve told, it can be used as a “swiss knife” and that mean’s everywhere! If you see my previous comment you will notice a collapsible table INSIDE my collapsible comment. As a matter of fact that is one of my future project in my blog, having ALL my sidebar data collapsible!
Let me explain:
Collapsible Element’s JS code is loaded in the HEAD of the page so that means that it is usable anywhere. Now it depends on your skills how and where you are gonna use it.
For instance if you take a look at my sidebar you will notice that i use Collapsible Archives plugin. I could use Collapsible Element for ALL my sidebar without having lots of other plugins doing the same job. That would make my site load a bit faster and i would also have multiple collapsible elements in my sidebar.
But it takes time to work with all elements in your sidebar and to replace the code. I would probably use DIV as containers and assigned ID’s manually to each element changing code at sidebar.php. I will do it when i find time but for now…
But if you try it let me see the result
Thx 4 comment
22-03-2008 @ 00:19
DeUCeD, thanks again but I’m afraid I don’t fully understand where the css code should be used. Is it placed each time you use xcollapse?
Should that be placed into the style sheet?
Or should it be inserted into the plugin’s php file?
22-03-2008 @ 16:01
Marc, the simplest way is to have it AS IS in your code editor and it will work. If you wanna have something in CSS then you have to add a class to the table. But try the manual way, find the style that suits you more and use it. You don’t have to mess anything in your stylesheet.
As you ve seen in my example i have the style code inside the table’s code, how simpler could it be? Get the red marked code and put it in your table’s code. Try it in your CODE editor…
23-03-2008 @ 21:18
First, great plugin, thank’s for all the work!
Second, is there a way to have collapsible elements stacked on top of one another (such as images, or bulleted words )without the space in between?
For example:
CE
CE
CE
instead of…
CE
CE
CE
Thanks!
23-03-2008 @ 23:59
That’s how I thought the css worked, after trying it the second time it still has failed to work properly.
In addition as you can see in this post the collapsed elements load open vice closed. I reinstalled the plugin but that didn’t correct the problem.
Any assistance you can give would be greatly appreciated.
24-03-2008 @ 07:58
Marc! You just copied table’s code! As i see you don’t have lot’s of experiance so the first thing you should ALWAYS do when playing with ANY code is find a decent editor (google for notepad2) or just use a plain NOTEPAD.
I ve noticed that CSS style in your table’s code has “ and ” INSTEAD of plain double quotes so try to correct them in the CODE editor! (if you copy table’s code in a notepad you will notice that id’s number is inside plain quotes but styles isn’t). Try it in the first table and it will work so then you should see the difference.
24-03-2008 @ 08:05
CT let me try it here…
CE a
CE b
CE c
If that’s what you are trying to do, after writing the code, first copy ALL the elements LINK one under another, then have ALL containers below them the same way. Something like this:
PS: Akismet marked you as spam
25-03-2008 @ 09:22
Actually I’ve been messing with this blogging stuff for about 5 years.
Unfortunately I over looked the “fancy” quote marks in the code. Thanks for all your help, and frankly look forward to an updated plugin where is isn’t necessary to add the style manually.
25-03-2008 @ 18:03
Hey Deuced, Referring back to comments 15, 21, 22 about opening a collapsed element from the url. To briefly restate, I had the entire comment box tucked into a collapsible table. All comments were viewable from the front page (instead of going to the post’s page to view the comments.) Clicking the Comments link under the post would expand the the collapsed table so that comments were immediately viewable, and the user could then scroll to the next post below.
I was trying to put something into the url so that when the page loaded it would uncollapse a specified table. (After a comment is posted, the page will refresh, expand the comment box(collapsed table) and show the comment just submitted at the top of the page).
I’ve got it working and thought I’d share.
I put this code into the footer of my theme, after the </body> tag.
The url looks like:
In the above example, it will uncollapse “commentbox3″ and then scroll the page down to “comment-33″.
Instead of naming my collapsed tables by random numbers, I use the name “commentbox” and the Post_ID. That way I can reconstruct it and build it into the redirect url when someone posts a comment.
The code could easily be changed to something along these lines:
And the url could pass the id number for the collapsed elements.
I put it into the footer because I wanted it to run after the body of the page had loaded.
Hopefully you will figure out a more graceful way of doing this in the next version where it can all be built into the plugin.
Thanks for a great plugin. — Travis
26-03-2008 @ 08:42
Travis, first of all i’m really glad you made it work for you! That’s exactly when they say “Code is Poetry”!
Now let say a few things.
Collapsible Elements in a page are elements loaded but just remain hidden. That’s great for search engines but that’s also is an extra load for your front page. Try to figure how slow would that page be if ALL comments would load in the front page. In Collapsible Comments page i have a link that i got around 80 heavy-duty really long comments in a special really long post. That would make things slow especially if they were ALL in the front page. On the other hand, if i wanted to have all comments in the front page that would be splendit! Assigning the post_ID was the only way for you to make it work for comments.
What is remarkable is the function for revealing specific elements and that’s something i MUST adopt to a new release having the default option for making some elements hidden and also an option for some others to be expanded!
I’ll test it and try to make the plugin better.
Many Thx for sharing this hint Travis!
02-04-2008 @ 18:07
Thanks a lot!
I made a little hack, because my collapsable elements are sometimes really long and so I had inserted only one line code more after the last line text und the :
Well… I cant insert code here, so in another way:
Copy the first line with the link and paste it after the last line of text.
Change the return=false to return=true
So the laszy user can close the Element without scrolling back.
03-04-2008 @ 23:20
U R right klaus, a similar approach is Collapsible Comments where i ve put a “close” link at the bottom. Next version of Collapsible Elements should have the ability to change your code and it will remember your custom code so it would be more easy to handle the code.
Thx 4 comment.
09-04-2008 @ 14:18
Hey, how can i use this for Archives, i would like to display the archives category wise and post should be collapsible… please advise..
09-04-2008 @ 15:06
Hey John, please read No 27 comment which is an answer to Beth on if Collapsible Elements can be used in the sidebar. Generally YES, you can use it anywhere but you have to manually put the code where you wanna to. Now if you are not experianced in html code then you ‘d better get Collapsible Archive plugin. But when i find some free time i promise i ‘ll post a tutorial on how it can be used in the sidebar making anything you see collapse and expand with just the same one JS file
Thx
11-04-2008 @ 12:48
Hi there,
great plugin, just what i need however i have wordpress 2.5 and when i click the “XCollapse” button in my HTML view nothing happens… no code is added to the editor as you describe above…
Am i doing something wrong or does it not work witn 2.5?
thanks
11-04-2008 @ 13:32
I’m using WP2.5 and if you are on HTML CODE editor it *should* provided you the code. Could you installed it again? Remember that it works ONLY in HTML view, *NOT* in VISUAL Editor.
11-04-2008 @ 14:28
I have worked out the problem… it doesnt work in ie7 - its fine in FF. Are you aware of this?
thanks
Nicole
11-04-2008 @ 15:11
NO! To tell you the truth i ‘ve run several test to IE6 but never thought that it there would be a problem in IE7. I ‘ll have to recheck it tomorrow in IE7 and confirm it. Thanx for letting me know about this.
BTW your website looks really well designed and proffessional!
12-04-2008 @ 01:02
Cheers for the comment on the site. I check back tomorrow to see if you can find a fix. otherwise im happy to use FF. thanks for the plugin. its gonna be great for my site.
14-04-2008 @ 09:05
Hey Nicole, sorry for the delay but i don’t have IE7 at home so i could only test it @ work. But WP2.5 along with IE7 DOES work for me. Unfortunately I cannot duplicate the error you have but i’m thinking that there’s maybe some settings in IE7 that prevents the code to appear. All i tried was to click the XCollapse button in the CODE editor (HTML) and the code appears, then publish it.
I will release a new version at the end of this month (hope to find some time) where u could choose the “container” between DIV, SPAN and TABLE and i will definately test it in IE7 but cannot find any fix if i cannot see the problem.
But it is true that IE7 “breaks” lots of things that other browsers don’t. And is also true that WP2.5 has some “issues” with IE7. I ‘ll do some more tests and hope to find the bug. But thx again for letting me know.
25-04-2008 @ 01:03
Thank you for this plugin, it works great. Not sure if there is a plugin conflict though or something else, but I run another plugin called WP-Print. WP Print usually formats blog posts nicely for the purposes of printing them out. However, with Collapsible Elements, it does not print out the content of the collapsed section, only the title. Do you know what the problem might be there?
25-04-2008 @ 01:25
Well i tried it and i can only guess that it sees the Collapsible Element as a Link and that’s why it prints the link but not the content. It has also lots of rewrite rules to try and guess what exactly is to be printed that is hard for me to find the rule that makes it bypass the hidden elements. But you could try and ask here. I’m sure that the solution should be simple.
30-04-2008 @ 09:17
[...] called Collapsible Elements and it works ANYWHERE on your web site! go over to Deuced and check it out! tell him what site you came from and he’ll give you ..um .. some of his [...]
30-04-2008 @ 21:12
Thank you so much for this plugin. I’m super new at all of this, as in SUPER NEW, and I found this plugin dead easy to install and use. Your instructions are clear - really appreciate it!!
01-05-2008 @ 14:35
I’m glad you finded usefull Andrea!
If you ever need further assistance let me know.
02-05-2008 @ 06:25
Unfortunately, it&#