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(
  '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.

Comments

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',
array(
  'handle' => 'Show Details...', 
  'content' => "Living Rm: ".$entity->LivingRoom.
" Dining Rm: ".$entity->DiningRoom.
"Kitchen: ".$entity->Kitchen,
  'collapsed' => TRUE)
),
);
.......

Reply · 5 years, 12 months ago
Pedro

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
Anne

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 (https://drupal.org/project/ed_classified) modules with a view to render jobs on a small community (http://www.hangar217.com/fr/babillard-annonces-appels- 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/collapsible.theme.inc on line 37 Any idea why this must be happening? This is a D6 site.

Reply · 5 years, 12 months ago
vchen

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
Bianchi

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
LK7889

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
felix

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