Applications are open for the 2016 Spring session of Drupal Career Online (DCO) program. Classes start March 21, 2016! Learn more.

New Podcast

Posted Saturday, January 30 at 7:44 pm
Drupal fork Backdrop co-founders Jen Lampton (jenlampton) and Nate Haug (quicksketch) joined Mike, Anna, and Ted to discuss the current state of Backdrop, its (surprising) relations with the Drupal community, Drupal 8, as well as some current Drupal news and our picks of the week!
Download Podcast 168
Syndicate content


Connect with DrupalEasy:


Interested in learning more about Drupal, but can't find the training you're looking for? Help us help you by letting us know what workshops interest you. Take this short survey to let us know!


Stay up-to-date on DrupalEasy workshops and other events. On average, we send about 1-2 newsletters per month.

Who are we?

DrupalEasy is a training and consulting company that specializes in public and private Drupal training as well as site building and consulting with a focus on best practices and building sustainable web sites. More...

What is Drupal?

Drupal is a free, super-powerful content management system for sites that require information posting and collection, including blogs, forums, videos, photos, and databases of information. We think it is the best platform available. Here's why...

Why Drupal?

More and more savvy organizations are going with Drupal for content management, and its no mystery why. It’s free, flexible, and easy to maintain for small or large volume sites. Learn more...

Create Collapsible jQuery Boxes with Drupal

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:

<legend>Click to Collapse</legend><p>This is how you collapse code. Now what?</p>



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.


Trackback URL for this post:

Your rating: None Average: 3.9 (28 votes)

More Quicktips


Guest wrote 4 years 18 weeks ago

You made my day - after twenty-four long long hours ...

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!

Guest wrote 4 years 23 weeks ago

With Drupal 7 you need to add the JavaScript like this...

drupal_add_library('system', 'drupal.collapse');

Guest wrote 4 years 24 weeks ago

Re: Drupal 7

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>

Guest wrote 4 years 24 weeks ago

Drupal 7

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?

ryanprice wrote 4 years 31 weeks ago

Actually you might want to

Actually you might want to check out Ben's new series of Beginning Module Development articles as a start. The Drupal.org Module Development Handbook is a good resource too.

Ryan Price

Guest wrote 4 years 32 weeks ago

I would love this

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)

Guest wrote 5 years 24 weeks ago

Problem with CKEditor

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?

Guest wrote 5 years 24 weeks ago

Is this a collapse.js bug?

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">
Title Here</h3>
This is the text info</p>

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?

Guest wrote 5 years 35 weeks ago

Collapsible Text module

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.

Guest wrote 5 years 44 weeks ago

Collapsing comments

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!


mjross wrote 6 years 8 weeks ago

Problem with example

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

ryanprice wrote 6 years 8 weeks ago

@mjross, Looks like I didn't


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.

Ryan Price

Syndicate content