WE Drupal

If you need new Drupal Talent, or just a little extra bandwidth, consider hosting an intern through our Work Experience (WE) Drupal program. You get a line in on the most highly trained newbies out there, while supporting talent development for the community.

New Podcast

Posted Tuesday, April 1 at 6:40 am
Théodore Biadala (nod_), technical consultant with Acquia, and one of the Drupal 8 JavaScript maintainers, joins Andrew, Ted, and Mike to talk about the current (and future) state of JavaScript in Drupal core. Also discussed is Acquia’s new certification program, DrupalCon Latin America, and picks of the week that you’re not going to want to miss!
Download Podcast 126
DrupalEasy_ep126_20140401.mp3
Syndicate content

Everywhere

Connect with DrupalEasy:

Survey

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!

Newsletter

Stay up-to-date on DrupalEasy workshops and other events. On average, we send about one newsletter 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>

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:

Trackback URL for this post:

http://drupaleasy.com/trackback/348
Your rating: None Average: 3.8 (24 votes)

More Quicktips


12 comments

Guest wrote 2 years 26 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 2 years 32 weeks ago

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


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

Guest wrote 2 years 32 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>
</fieldset>

Guest wrote 2 years 32 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 2 years 40 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
@liberatr

Guest wrote 2 years 40 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 3 years 33 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 3 years 33 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">
<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?

Guest wrote 3 years 43 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 4 years 6 days 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!

Kristin
www.newtactics.org

mjross wrote 4 years 17 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 4 years 17 weeks ago

@mjross, Looks like I didn't

@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.

Ryan Price
@liberatr

Syndicate content