Painless Collapsible Divs In Drupal

15 Dec · by Tim Kamanin · 2 min read

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(
'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 file or otherwise, your site may break if you accidentally uninstalled ctools.


Required for comment verification

mr. chips

EXCELLENT! I used this in a custom entity in D7. I removed "print" and put it in the markup as shown below. I spent hours trying to do it with css and/or js, never got it working. I thing I'm going to be using "ctools_collapsible" a lot!

   * Extending the EntityAPIController
  $build['infoBlock'] = array(
  '#type' => 'markup',
  '#markup' => theme('ctools_collapsible',
  'handle' => 'Show Details...', 
  'content' => "Living Rm: ".$entity->LivingRoom.
" Dining Rm: ".$entity->DiningRoom.
"Kitchen: ".$entity->Kitchen,
  'collapsed' => TRUE)

Reply · 5 years, 12 months ago

Hi, Can i use this also for a field in a form? Thanks

Reply · 5 years, 12 months ago
Daniel Schiavone

Nicely done. This is nice a simple and it re-purposes existing code.

Reply · 5 years, 12 months ago

Hi, this looks so cool! If I'm ok with Drupal 7 modules, I get scared when it comes to code and that kind of stuff... If you had a few minutes to help me out, that would be great! I'm using the ed_classified ( modules with a view to render jobs on a small community ( de-projets-casting-calls). The theme is Adaptative Theme. So it would be cool to be able to have collapsible node title (clicking the title would «open» to full node); the view is made with Format : Show: Content | Full content (straight view). So would the code look like this? 'Click me and you will see collapsed content', 'content' => $node-classified, 'collapsed' => TRUE ) ); ?> What will happen when people click on taxonomy terms? Will it still work? And if they click to ad a comment? If I what a «button like» effect (CSS), will I point to -> .node header.with-picture {... or -> node node- classified... something? (it would be nice to be able to keep all the header content — image, title, date, etc. — in the «collapsible button». Thanks! Anne.

Reply · 5 years, 12 months ago
Joseph Cheek

For D6 it's theme('ctools_collapsible', $handle, $content, $collapsed) (ie, the last three parameters are separate, not inside an array)

Reply · 5 years, 12 months ago
Pareen Lathia

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/ on line 37 Any idea why this must be happening? This is a D6 site.

Reply · 5 years, 12 months ago

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

Reply · 5 years, 12 months ago

How can I render archive ?

print theme('ctools_collapsible', array('handle' => $title, 'content' => render($page['sidebar_second']), 'collapsed' => TRUE));
Reply · 5 years, 12 months ago

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.

Reply · 5 years, 12 months ago

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?

Reply · 5 years, 12 months ago
Benjamin Lutaaya

Thanks for sharing

Reply · 5 years, 12 months ago