MJC SEO & Web Development Blog > Simple JQuery Collapsible Content in Drupal 7 with Ctools

Simple JQuery Collapsible Content in Drupal 7 with Ctools

Drupal 7 Development: Collapsing Content with no Extra JavaScript

I stumbled upon a neat solution for collapsible content sections for Drupal 7.

It uses functionality built into the Ctools module, which must be installed with Views so is already installed on most sites.

Edit and add this code to your template.php:

function THEME_collapse_content($c_content, $collapse_heading) {
print theme('ctools_collapsible', array('handle' => $collapse_heading, 'content' => $c_content, 'collapsed' => TRUE));

Then where you want your collapsible content to appear, edit and add this code:


$collapse_heading = 'Heading for the Collapsed Content';
$c_content = <<<'EOD'

[paste the HTML of your content to be collapsed here]


THEME_collapse_content($c_content, $collapse_heading);


I don’t have a demo available right now but if you’ve ever seen a collapsible div where content is hidden with CSS and shown with JavaScript, you know what to expect in terms of functionality.

The resulting elements are very minimal in appearance out of the box but can easily be styled with CSS. It would be great to integrate this with the WYSIWYG editor as a custom button, I’m not sure but my current thinking is this would need to be made into a module first.

I like this kind of presentation as it allows an information rich display in an initially small area. This in particular gives opportunities to include vital-for-SEO topical text content which it can otherwise be hard to find room for with many layouts.

Post a Comment

Your email is never shared. Required fields are marked *