Views displayed in an accordion

This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the taxonomy terms "Drupal," "JQuery," and "CSS." (See the accordion at the bottom of the page.)

The building of this accordion consists of 4 main steps:

1. Create the Views blocks.
2. Place the blocks on the page.
3. Style the blocks.
4. Control the opening and closing of the accordion with jquery.

Create the Views blocks

Go to Administer > Site Building > Views and add a new view. I named my view "list_taxon_drupal". Add some fields by clicking on the plus sign next to the Fields header. The fields I added were "Node: Title" and "Content: Description". For both I hid the labels. For the Description, I set it to "Trim this field to a maximum length" of 120.

Next, add a couple Filters. I added 2. "Node: Published Yes" and "Taxonomy: Term = Drupal". Then, add a Block display - in the left column choose Block from the drop-down and click Add Display - and save the View.

Finally, clone this view and change the Taxonomy Term filter. In this case I made 2 clones, one for "JQuery" and another one for "CSS."

Place the blocks on the page

At Administer > Site Building > Blocks, place the Views blocks you just created into the Content area. In the configuration for each I entered a title and, since I want this to show up only on this page, I chose "Show on only the listed pages" and entered its URL in the text area (node/26). Click "Save Blocks".

Style the blocks

The blocks will now appear on the page. I looked at the page source to find out what classes Drupal and Views assigned to my Views blocks and wrote some CSS to style the blocks.

<style>

div.block-views {
  display: block;
  clear: both;
  width: 480px;
  padding: 0;
  border: 1px solid #888;
}

div.block-views h2.title {
  font-size: 1em;
  font-weight: bold;
  padding: 6px;
  margin: 0;
  background-color: #ccc;
  border-bottom: 1px solid #888;
}

div.block-views h2.title:hover {
  background-color: #eee;
}

div.block-views div.views-row {
  margin: 4px 6px;
}

</style>

Note: in this demonstration, I put the CSS and the jquery code in the "Code" text area on this page. This process is described in a separate article. Of course, the CSS and jquery could be placed in your theme's style.css and script.js files instead.

Control the accordion with jquery

The scripting is fairly simple and does 2 things. First, when the page loads it hide the content of the accordion panels. This could be done in the CSS, but by doing it in the jquery we ensure that a visitor without javascript will be able to access the content (i.e. all the accordion panels will be open).

Second, there is the function to handle clicks on the accordion headers. I have commented each line to explain what each does. In the click function I could have used "hide" and "show", but instead I used "slide" so there is some animation to it.

<script>

$(document).ready(function() {

  // hide all the panels of the accordion
  $('div.block-views div.content').hide();

  // function when title clicked
  $('div.block-views h2.title').click(function() {
     // put the id of the parent in a variable
     var myparent = $(this).parent().attr('id');
     // make a variable that identifies the accordion panel
     var mychild = 'div#' + myparent + ' div.content';
     
     // the logic to close the panel if it is open or
     // close all panels and then open the clicked panel
     if ( $(mychild).is(':visible')){
       $(mychild).slideToggle('fast');
     } else {
       $('div.block-views div.content').slideUp('fast');
       $(mychild).slideToggle('fast');
     }
   });
});

</script>

See the accordion at the bottom of this page.