New Podcast

Posted Tuesday, July 27 at 2:29 pm

Ryan Price and Mike Anello recently talked with Jacob Redding (jredding), author of Beginning Drupal as well Treasurer and Interim General Manager of the Drupal Association.

Download Podcast 41
DrupalEasy_ep41_20100727.mp3
Syndicate content

NEWSLETTER

Stay informed on our latest news!

Syndicate content

Testimonial

Spending the day with you guys really helped me realize that Drupal allows me to do many of the same things I manually did, but in a nice little package already to go. I look forward to attending the next class you have.

Who are we?

DrupalEasy is the collective expertise of Ryan Price and Michael Anello, who joined forces to provide training and consulting services worldwide. Read all about them and what they can do.

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

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:
<fieldset class="collapsible"><legend>Click to Collapse</legend><p>This is how you collapse code. Now what?</p></fieldset>

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
No votes yet

3 comments

Guest wrote 6 weeks 6 days 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 16 weeks 22 hours 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 32 weeks 3 days 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?

user picture
ryanprice wrote 32 weeks 3 days 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.

Syndicate content