Create Collapsible jQuery Boxes with Drupal

Published December 12, 2009

Note: the example below do not work on Drupal 8 sites (like this one!)

Edit: you can also use ctools

Is there too much text on your page? Do you need to allow users to un-clutter an interface, or hide some of the interface until your users need it? Don't go and grab any extra JavaScript, Drupal can do collapsible fieldsets out of the box!

However, there are some steps involved:

  1. You MUST use a <fieldset> with a <legend> inside, the jQuery won't work right without it.
  2. You have to enclose any content inside the fieldset in some sort of HTML tag. The styling will break otherwise
  3. In order to get this to work, you have to include the collapse.js file from the misc/ directory.

You might think collapse.js is included all the time, but Drupal is smarter than you. This file is currently only included when a Drupal form has a fieldset in it. The upshot is that you can include it manually.

The "best" way to include the file is by using drupal_add_js() - placing this function call in a module is the path of least resistance. If you'd rather place this in your theme, you have a few extra steps. You'll need the information behind this link: Can't Add CSS, JS, RSS Icon Or Set Title Or Messages In Preprocess Page?

Now you need to create the fieldset itself:


Click to Collapse

This is how you collapse code. Now what?

Example:

 

Click to Collapse

This is how you collapse code. Now what?

If you add the class "collapsed" as well as "collapsible", the fieldset will start out in that state.

Example:

Comments

Author comment

When clicking the legend "Click to Collapse" in the example, nothing happens, at least in Firefox 3.5.5. Any ideas?

Submitted by mjross on Sun, 12/13/2009 - 20:54

@mjross,

Looks like I didn't get my example to work the way I wanted. Sadly, I have the drupal_add_js() hanging outside of a function in my template.php right now. :(

Putting the call in a module would still be the best place, if you're using Drupal 6.

Hi Ryan and others,

It looks like this will help to collapse a fieldset - can I use a similar method to collapse comments - and/or threads of comments in drupal 6? Have you ever done this? Any ideas?

My problem is lots of comments...

Thanks for your help!

Kristin
www.newtactics.org

Submitted by Guest (not verified) on Wed, 04/07/2010 - 17:45

Implementing the module "Collapsible Text" allows for an input filter to allow for collapsible when creating, say, a page. The module instructions would tell you to use a different syntax than suggested here, but personaly...

Click to CollapseThis is how you collapse code. Now what?

works better for me. Thanks for the quick tut.

Submitted by Guest (not verified) on Thu, 06/10/2010 - 17:47

I use Drupal's CSS classes of "collapsible" and "collapsed" in some of my content markup, as in the following example:

<fieldset class="collapsible collapsed">
<legend> Click Here to Collapse/Expand </legend><div class="fieldset-wrapper">
<h3>
Title Here</h3>
<p>
This is the text info</p>
</div>
</fieldset>
</code>

This markup produces a div that collapses/expands very nicely within my Drupal 6 site. Works on all popular browsers as well.

Note, however, that my example above has the "</legend>" immediately followed by the next markup field on the page - which in this case happens to be a "<div>" field. I do this deliberately because of a bug? in collapse.js?: if the next field is not immediately abutting the "</legend>" then the collapse does not function.

For example, if there were a space or a tab or whatever located between the "</legend>" and the "<div>" then the collapse would no longer be "collapsible". Same on all browsers.

This is a growing problem for me because I use text editors like CKEditor which reformat my HTML after every page update, and they inevitably insert spaces or tabs to improve readability. And they inevitably insert one or more spaces or tabs or whatever after my "</legend>" markup and thus void my collapsible divs.

The only way I can get them to be collapsible again is to go back in with a plain text editor and delete any spaces or tabs between the "</legend>" and the "<div>"

I think the problem is that collapse.js does not work for me if my "</legend>" markup is not immediately followed by the "<div>". Do you know any workaround or fix?

Submitted by Guest (not verified) on Tue, 08/24/2010 - 14:34

I use your "Click to Collapse" example code on my Drupal 6 Pages and it works well on all browsers.

However, on my Drupal 6 site I use the latest CKEditor to perform updates to all content, and part of CKEditor's nature is to reformat the HTML markup whenever it is used to update a page. Thus, if I happen to update any part of a page that contains your collapsible code then CKEditor rewrites it and puts all the markup fields on different lines - thus breaking your "Step #2" rule above.

Using your "Click to Collapse" example code, the markup would be reformatted by CKEditor to place the "p" (i.e., the paragraph HTML field) on a new line - thus breaking the style such that collapse.js can no longer dynamically update the div to become collapsible.

Note that I have tried to tweak the admin/settings/ckeditor config params in an attempt to get it to stop reformatting the markup, but to no avail.

Do you know of any way to either stop CKEditor from reformatting the markup, or else come up with an new example that won't break even if CKEditor continues to do its thing?

Submitted by Guest (not verified) on Tue, 08/24/2010 - 23:42

I appreciate the linkout to a tutorial on how to put such code into a custom module, but i was wondering ryan if you could explain this process to me as i was an idiot (i am an idiot)

Submitted by Guest (not verified) on Sat, 07/02/2011 - 07:52

This is great and i am trying to accomplish this but unfortunately, i cant seem to be able to get this to work in Drupal 7. Do you have any idea what i may have to do?

Submitted by Guest (not verified) on Sun, 08/28/2011 - 09:38

Here's an example of what I had to do for Drupal 7. I hope it works for you as well:


<fieldset class="collapsible collapsed">
     <legend><span class="fieldset-legend">Who's the master!?</span></legend>
     <div class="fieldset-wrapper"><p>Sho' Nuff!</p></div>
</fieldset>

Submitted by Guest (not verified) on Mon, 08/29/2011 - 15:44

not to see the wood for the trees

... I need to have a solution by the means of unobstrusive JavaScript - there fore 'collapsible text' was not my solution ... I've been racking my brain, struggling with this view and that field and this modul and - yea - a small pinch of theming and content template frippery. I am not exactly a drupal newbe - but this night I was so confused that I did not even know my own name.

See the good that is so close!

Submitted by Guest (not verified) on Mon, 10/10/2011 - 01:47

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name
CAPTCHA