Looking for a way to incorporate an accordion into an alphabetic glossary in Drupal 7

Question

I have a content type called Brand, and in that brand there is the brand title and an image gallery.

I'm trying to create an accordion style alphabetic menu. Click on the letter of the car brand and it will list the brands starting with that letter. Click on the brand and the gallery will show.

I can get an accordion of each brand, and then when clicked the gallery shows, but that's not the intention.

Can anyone send me down the right path to accomplish this?

Photo of what I'm trying to accomplish: http://i.imgur.com/GnuGacB.jpg

Answer 1

1) Create a views with content type Brands and select Format > Show: Fields. By default you will see a list of the node titles. Sort the results by Title:ascending.

2) Add a Field: Content: Title. Check "Exclude from display", uncheck "Link this field to the original piece of content" and on the Rewrite results select "Trim this field to a maximum length" where set 1. Also in the same section uncheck the "Trim only on a word boundary" and "Add an elipsis" and finally check the "Strip HTML tags".

This will fetch the first letter of each title.

3) Finally on the Format: Unformatted List: Settings use the "Grouping field Nr.1" option and select the latest field you added.

4) Accordion is another issue here. You probably know how to accomplish that task.