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.

JQuery

One of the frustrating things about Web images is that they are often too small. There are several ways to deal with...
Here is a pretty basic Web page - some tabs and a content area. When the user clicks a tab, some content loads into the...
This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a...
Here is a simple demonstration of jquery-powered animation. We'll start with the simplest type of animation - panning....
Another demonstration of jquery-powered animation. This one is zooming. In our first example, panning, the jquery...
A while back I made a demo of an image magnifier on a stand-alone web page. Now I'm going to implement the same...
If you go to one of my Magnifier pages, you will see, between the title and the image, the link "Back to Magnifier...
This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the...
Click here to see the demo. When writing code I always try to keep things simple and with smartphones, this is a really...
I ran into a little problem with links in the content that was loaded into the page with jQuery. It turns out that...

Drupal

Trying to describe Drupal is a bit like the old blind men and the elephant story. But anyway you look at it, Drupal is...
One thing many will want to do is add a block of Google AdSense ads to their Drupal sites. There are some modules...
This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a...
Here's a little demonstration of photo tagging ala facebook, flickr, etc. done with just CSS. When you hover over a...
Here is a simple demonstration of jquery-powered animation. We'll start with the simplest type of animation - panning....
Another demonstration of jquery-powered animation. This one is zooming. In our first example, panning, the jquery...
A while back I made a demo of an image magnifier on a stand-alone web page. Now I'm going to implement the same...
Now that I've got my Image Magnifier content type I want to make a list with links to the images I upload to it. For...
Now that I've got Views giving me a list of links to Magnifier nodes that I've put into a Block on the home page, I...

CSS

This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a...
Here's a little demonstration of photo tagging ala facebook, flickr, etc. done with just CSS. When you hover over a...
One issue I haven't seen discussed much is the impact of touchscreens on how we design web pages. The most obvious...
This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the...
Here is a demo page showing how to make one page a a Drupal site look different from the rest. One way to do this would...
Click here to see the demo. When writing code I always try to keep things simple and with smartphones, this is a really...
Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown...
Sometimes one gets so involved in a project that one forgets to write about it. That's been me these past couple of...
After playing with a couple of keyboard and drum apps on the iPhone and being underwhelmed, I set out to see what kind...
"Places" is a Drupal7 site that shows all the locations in it either as a list or on a map. The site can be viewed at...