Last updated 21 December 2011. Created on 12 December 2011.
Edited by danielb. Log in to edit this page.


This module was made when I had built a massive site structure using the book module, although similar hierarchies are possible with other modules such as node reference. I used a view reference to embed a view of the child nodes into each node. Each view also showed the output of the child node's view references. I discovered I could produce a massive tree of nodes, however it was very slow to load. I needed a solution that allows the user to load a minimal version of the node, with the ability to produce and display the view reference field at the user's discretion, thereby preventing memory or time limits exceeding upon page load, especially once more nodes were added. I tried a few things, and soon the peekaboo cck field was born, one field to point to another.

Example setup

Prior to using this module you have created some other CCK field on your content type.

  1. Create a CCK field using the Peekaboo Select widget (See CCK module help).
  2. Optionally, configure the default value of the CCK field to point to a target CCK field, and use the 'content permissions' module to disable the ability for node authors in certain roles to change this field.
  3. Choose the wording for the link, and whether to hide the link upon use. If the link is not hidden it will be usable as a 'toggle' for the content.
  4. For optimal performance, hide and exclude the target field from being loaded in the node on the 'display fields' section when configuring your content type.
  5. Choose the formatter in the 'display fields' section appropriate for your peekaboo field:
    • Default - Gives the link and the empty container for the Ajax.
    • Plain (no link) - Gives only the empty container for the Ajax. You would have to theme/template your own link. The resulting HTML output must contain the three classes as shown in the example below, as well as have the same ID as the div container except with -link appended to the end.
      <a href="#" id="[id of div]-link" class="peekaboo-link peekaboo-collapsed peekaboo-unprocessed">text</a>
      You can also add the class "peekaboo-link-removable" to remove the link after it is used.
      tip: look at the source of the function peekaboo_link_anchor() for a complete way of generating the html output.
    • Link only - Gives only the link, you could use it in conjunction with the plain formatter in views, or provide the div container yourself, which involves using the 3 classes: peekaboo-container, peekaboo-collapsed, and peekaboo-unprocessed, as well as the same ID as the link, except without the -link part at the end. You would also need to add the CSS and JavaScript files.
      tip: look at the source of the function peekaboo_container() for a complete way of generating the html output and ensuring the proper JavaScript and CSS files are added.
  6. Optionally use CSS to turn the link into an image, for example:
       <style type="text/css">
       a.peekaboo-link {
         /* Give the link a bounding box */
         display: block;
         width: 100px; /* width of bg image */
         height: 100px;  /* height of bg image */
         /* Add the image - use your imagination */
         background: transparent url(images/my_image.png) no-repeat 0 0;
         /* Hide the text in most browsers */
         text-indent: -10000px;
         overflow: hidden;
         /* Hide the text in IE */
         line-height: 0;
         /* If your image simulates a button, use this cursor style */
         cursor: default;
  7. Optionally use a different image for a.peekaboo-collapsed and a.peekaboo-expanded selectors, e.g. an arrow that points to the right, and an arrow that points down.
  8. Optionally override the styles in the .css file included with the module, such as the throbber image.


You will find the following three functions defined in the module file:

  • theme_peekaboo_formatter_default($element)
  • theme_peekaboo_formatter_plain($element)
  • theme_peekaboo_formatter_link($element)

You can add more output to these functions, but be careful if changing the existing output. To reduce problems the default output is generated by helper functions.

Looking for support? Visit the forums, or join #drupal-support in IRC.