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.

Want to get more 🔥 tips like this one?

Subscribe to get notified about new dev tutorials

Comments