How can I create a collapsible block from page content using .tpl file?

Question

I'm using the FlickrGallery module - http://drupal.org/project/flickrgallery and its basic functionality is pretty great - it automatically pulls in photosets from the Flickr account and displays everything using shadowbox, which means it'll work on iPhones, iPads, etc. Once the user uploads a photoset on Flickr, it simply appears on the site - no fuss, no muss. And it's also domain-sensitive, so different subsites can have different galleries. Like I said, pretty great - except for one major issue:

The module works outside of Drupal's content system - it simply pulls in a page and everything's hardcoded. The problem is that the page displays all photosets and there's no way to limit the photosets displayed, by paging or otherwise.

I want to create a multimedia page with collapsible blocks for photos and video - the video is no problem using Collapsiblock, but with a large number of photosets, the user will need to scroll down to the bottom of the page to see all available content.

Here's my question: How would I place the page content into a collapsible block using the module's .tpl file? Any ideas greatly appreciated - this is my first post on Drupal Answers!

Here's the existing template (with a few mods):

<?php 
/*
 * Available vars:
 * - $description: Containing the description of the FlickrGallery module you provided at the settings page
 * - $albums: Array that contains the image and titles with links
 */
?>
<div id='flickrgallery'>
  <div id='flickrgallery-description'><?php print $description; ?></div>
  <div id='flickrgallery-albums'>
    <?php foreach ($albums as $key => $album) : ?>
      <div class='flickr-wrap'>
      <div class='flickr-image-link'>
        <?php print $album['image_link']; ?></div>
        <div class='flickr-title-link'>
        <?php print $album['title_link'];  ?></div>
        <div class='flickr-total'><?php print $album['total'] . t(' Pictures'); ?></div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

It would be great to call the code for collapsiblock - thanks for any ideas here!

Answer 1

i'm pretty sure all the core js and css files should handle both the collapsing and styling of the fieldset. you could simply add the fieldset into your code. however, if it is not added in by default for some reason you can use the following addition to your function code.

drupal_add_js('misc/collapse.js');
drupal_add_js('misc/form.js')

Below should be an opened fieldset example.

<div id='flickrgallery'>
  <div id='flickrgallery-description'>
    <?php print $description; ?>
  </div>
  <div id='flickrgallery-albums'>
    <?php foreach ($albums as $key => $album) : ?>
     <fieldset class=" collapsible collapsed"> 
     <legend><span class="fieldset-legend">More Info</span></legend> 
      <div class="fieldset-wrapper"> 
       <div class='flickr-wrap'>
        <div class='flickr-image-link'>
         <?php print $album['image_link']; ?>
        </div>
        <div class='flickr-title-link'>
         <?php print $album['title_link'];  ?>
        </div>
        <div class='flickr-total'>
         <?php print $album['total'] . t(' Pictures'); ?>
        </div>
      </div>
    </div>
   </fieldset>
  <?php endforeach; ?>
 </div>
</div>

To have it closed simply add collapsed to your class like <fieldset class="collapsible collapsed">