Painless Collapsible Divs In Drupal

December 16th, 2011 | in
Drupal
by Tim Kamanin

It's almost midnight in my area, but I couldn't resist sharing this cool theming tip with you. Ok, so you want to create a cool collapsible div to hide some content on your page. What would you do? Write another javascript/jquery snippet and mess with callbacks, toggles, etc?

Well, in Drupal this can be done even easier! Chaos tool suite (aka Ctools) comes to rescue! This module is a must have on any website, so don't worry about installing one more module to do a simple thing. And I'm 90% of you have it already installed.

Ok now to the process, let's collapse the div!

1) Put the content you want to see in a collapse field into the variable, let's call it $collapsed_content
2) And now the magic comes, use this theme function to output collapsible div:

print theme(
  'ctools_collapsible',
  array(
    'handle' => 'Click me and you will see collapsed content', 
    'content' => $collapsed_content, 
    'collapsed' => TRUE
  )
);

handle - stands for a clickable text which will collapse/uncollapse your div;
content - we put out content here, previously assigned to $collapsed_content variable;
collapsed - defines default state of a collapsible div, in our case it's collapsed, if FALSE it's uncollapsed. Simple.

That's all! Just two lines of code and you're set with a nice collapsible div.

Note for novices: you can put this code to your node template (for example, node.tpl.php file) OR to your custom module (custom_module.module file) OR to template.php file, on overall, to any place where you have a code which is responsible for the desired output. If you put this code into your custom module, don't forget to add ctools dependency to your custom_module.info file or otherwise, your site may break if you accidentally uninstalled ctools.

Tags 

drupal 7, drupal planet

Comments

Submitted by Benjamin Lutaaya on Wed, 12/21/2011 - 09:58

Thanks for sharing

Submitted by felix on Sat, 02/11/2012 - 11:16

Thanks for this. I am a noob, it's true, but thanks to your advice I got it working....only I had to put my variable ($collapsed_content) into my custom node--17.tpl.php - If I added it as a PHP Code wrapped variable in the normal way I add text to a page, it gives the 'undefined variable' error....
I would prefer to be able to update my content without editing tpl.php files, is there a way to declare teh variable's value through the standard content-adding Drupal mechanisms?
Also,as the page renders, you see the collapsed text for half a second before it hides...anyway around that?

Submitted by LK7889 on Wed, 03/07/2012 - 21:35

Thank you! I was looking for an easy way to collapse my comments area div and this did the trick for me after hours of searching for a good, Drupalized way to complete this. Your articles have been a major help to me more than once.

Submitted by Bianchi on Thu, 09/06/2012 - 12:03

How can I render archive ?

print theme('ctools_collapsible', array('handle' => $title, 'content' => render($page['sidebar_second']), 'collapsed' => TRUE));

Submitted by vchen on Mon, 10/15/2012 - 21:28

I'm a real noob, so can you elaborate on your first step: Put the content you want to see in a collapse field into the variable, let's call it $collapsed_content

How do you put content into a variable? Do you do that on the tpl.php level?

Thanks

Submitted by Tim on Wed, 10/17/2012 - 22:06

You can do this either on module or .tpl level, your content may look like:

$collapsed_content = '<h2>This is a simple header</h2><p>With a paragraph.</p>';

So now, you have some html code assigned to $collapsed_content variable, now you can make it collapsible. Hope this helps.

Submitted by Pareen Lathia on Wed, 02/06/2013 - 05:31

I am getting this error when embedding this code in tpl file.

warning: Missing argument 2 for theme_ctools_collapsible() in sites/all/modules/ctools/includes/collapsible.theme.inc on line 37

Any idea why this must be happening? This is a D6 site.

Submitted by Joseph Cheek on Mon, 03/18/2013 - 22:30

For D6 it's

theme('ctools_collapsible', $handle, $content, $collapsed)

(ie, the last three parameters are separate, not inside an array)

Add new comment

You are here

Home