We recently had a client who requested their current static site to be integrated into the Drupal CMS. No worries, their current site had some cool ways of displaying some of their content which knew Drupal could handle, but didn't know if someone had already done this before, allowing me to use their notes for a quick integration for our client.

One way our client had content displaying was through the use of collapsible content. For example, there is a list of say 4 items, when you click on the 1st item, text relating to that item would then display underneath and the 2nd, 3rd, and 4th list items would move down to make way for the text. Now Drupal already uses this feature (like FAQ's) and in the backend, but not for custom created content added by the user (to my knowledge) so I found myself searching the Internet to find if someone had successfully integrated this feature, and had no luck.

So with a little bit of trial an error, I have successfully used Drupal's existing collapsible feature for my custom content, so it displayed like Drupal's FAQ's. I won't go into massive detail of how to install modules etc, so this is aimed at users who already have an understanding of Drupal and know what they are doing.

This solution is for Drupal 5.11
Modules Used: Content Construction Kit (CCK), Content Templates, Views

Step 1. Enable the above listed modules (if not already)

Step 2. Create a new content type

So this content type will be used as your collapsible content. The node title will be the link, and the body will become the content that is show when the title is clicked. For my solution, I created a content type called Latest News and kept the title label as “title” and body label as “body”.

Step 3. Create a view

A view now needs to be created to display your new content type. Go to site building>views>add. Add your view name, check “provide page view”, give it a url, select “list view” for view type, and give the page a title. Under fields, add Node: Body. For Filters I have Node: Publish equals yes, and Node: Type is one of Latest News. Now add the following code into the Header section of the view and select input format as PHP.



Then save your view.

Step 4. Create a content template for your content type

Go to Content Management>Content Templates and select “create template” next to your new content type. In the body section tick “affect body output” and in body template add the following code



And hit submit to save.

Step 5. Add some content

Now to test, add some content (more than one) to your new content type and test using the view url you set up. If done properly, your view should be displaying a list of node titles and clicking on one should expand/collapse the body of the node. If not, go back and retrace your steps to make sure everything is in order. If it works, yahoo!

Hope this was helpful. To see this in action, please visit http://www.newsawards.com.au/latest-news

For some nicer functionality, try adding some css to show a plus and minus sign when expanded/collapsed like in our example.

Stay tuned for an example of how we integrated the thickbox funtionality for custom content, as we have done on the http://www.newsawards.com.au/08-winners page (Click on a winner)