Drupal 7 Views Accordion Module

By shane
Tue, 2013-02-12 23:55
6 comments
Daily Dose of Drupal Episode #107

Share with Others

The Drupal 7 Views Accordion module allows you to build a Drupal View with results displayed in jQuery accordion tabs.

In this episode you will learn:

  • How to install and configure the Drupal Views Accordion module
  • How to build a simple Drupal View using the Drupal Views Accordion module
  • How to change the Drupal Views settings to alter how the Views Accordion module works

Another big thanks to Drupalize.me for sponsoring this episode of the Daily Dose of Drupal.

If you are new to views, you can check out our Drupal views intro.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 107. Today we’re going to be going over the Views Accordion Module. And the Views Accordion Module basically provides a display plug-in for the Views Module that lets you take advantage of Accordion like features within your view.

So as you can see from a little demo image here you click on each section and it’ll have it expand and collapse based on which section you click. So before we get started; as always I am Shane Thomas, you can follow me on Twitter at smthomas3, also go to codekarate.com and make sure to sign up for the newsletter.

Today’s sponsor is drupalize.me and if you haven’t checked out drupalize.me already please do so. It is one of the very best ways to learn Drupal, they have hundreds and hundreds of videos on learning Drupal from the basics that go over modules like the panels module, they have stuff on Drupal Commerce, they have pretty much anything Drupal related, you can find it in drupalize.me.

So go ahead and check them out and if you do, make sure to use promo code or coupon code CK2FEB and you get 20% off and you let them know that I sent you their way. So let’s go ahead and get started; I have a test site here where I have the Views Accordion Module downloaded and installed, I have a whole bunch of test content that I’ve generated, just a whole bunch of articles and I’m going to create a very simple Views Accordion View to show you how it works and you’ll notice it’s pretty much just like the other Views.

So once you get the hang of it you can pretty much run with it and build any different type of view using the Views Accordion Module that you’d like. So first we’re going to go ahead and show ahead and show that I do have the module installed, it’s 7.x-1.0.RC2 version and we get started by just going to Views Add New View so we’re going to create a new view here, I’ll go ahead and call this accordion and we’re going to show content of type article and we’re going to create a page called Accordion and the display format ... this is the important part here; it’s going to be Views Accordion.

You’re going to make sure you want to select Fields here and you can select as many items as you want on a page, we’ll use a page here and leave the rest at its default. Just make sure you select Fields and the way it works is the Views Accordion Module takes into account two fields. The first field is used if you look at the demo image here as the actual text that you see when you click.

The second field or any other fields that you add after are added into the more of a content section. So I’m going to go ahead and add another field here; we’ll call it Body and to keep things consistent to make everything about the same size I’m actually going to strip the HTML tags from the body and trim to we’ll say 400 characters just to keep things about the same size and I’ll go ahead and add that.

I can also check out the Views Accordion settings, you can see there is an animation effect so you can have a couple of different animation options here instead of just a swing. Auto Height; we’ll use the highest content part for the height so basically it looks for ...and this is why I stripped it out of the HTML tags and looks for the tallest block and tries to set them all to that height making sure it can provide more consistent animations.

You can of course uncheck this, you can have it apply unclick or unmouse over and a couple of different options here such as disabling if there’s only one result filling the space so you can go ahead and try those options out as well, I’m going to leave everything at its default just to show you how it works out of the box, I save this and I click on here to view the page and as you can see I have an Accordion already set up.

You can see there is a page here around the bottom so it’s just like any other view.
However; when I click this on the title it drops in just like an Accordion should. As you can see it’s all set up to be at the same height because I trimmed out the HTML from the fields but I’m going to go ahead and add some additional items so I’ll add for instance ... let’s see here and add a link so you can get the content we’ll also add the post date and we’ll leave it at that for now.

So I’ll add the link and call it View Post, we’ll use the date format to say how much time has passed since it’s been created, I’m going to reorder this to put the link at the bottom, the post date is second on the list so as you can see I got a couple of different fields here and the title is the only one that displays in the top section and the rest is going to display inside the actual Accordion after it expands. So as you can see it tells when it was posted the body and I have a link to view the post but one thing you will notice is if I come back to my view this title field actually right now is said to be a link.

It doesn’t matter if I have this checked or not. Views Accordion will not let you set anything in this area of top as a link because of course it needs that. I’m going to go ahead and change these settings just to show you a couple of different options. I’ll change this to Slide and I’ll change it to Mouse Over just to show what else might be possible. Now when I save this, refreshes, you can see this is a little bit different of an animation as it goes away, it has a nice little bounce to it.

So as you can see that is the Views Accordion Module, if you view the View it’s going to be really familiar. There’s not a lot a lot of differences from other View style plug-ins. Go ahead and give it a try.

There’s a lot of different things you can do with this especially if you need to group things in an Accordion fashion of course. It works according to the drupal.org page, works with groupings and relationships so it’s going to be really familiar to other views type things that you’ve worked in the past so go ahead and give it a try. Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal and we will back again next time. Thank you for watching.

Comments

After visiting the site a few times looking for your daily update, i was pretty sure this was not posted on 12th till i noticed the time on the post. 23:55 Seriously?? Impressive.

Noticed the placeholder text in the login,registration, search, comment forms of your site. Would love to learn how to do it. It would be nice if you could point me in the right direction or do a screencast on it sometime. Thanks & regards.

Hi,

This was an excellent post. I have a site that has issues that this will resolve, so thank you. Any chance you can you refer me to any documentation for creating accordions without a view? I have a content type where I want to enter section headings and bodies (multiple sets) and then have the sets display in accordions. Thanks in advance if you can direct me to how to handle this.

If you are looking for a way to enter data in a views accordion format, the field group module might be able to help. If you are looking to add multiple sections, and then display those results in an accordion, you still may want to use this module.

You could look into the Field Collection Module, and then use the Field Collection Views module (along with this module) to display the results of the various content type field collections within an accordion view on an individual content type page.

Not sure if that answers your question or is very clear, but let me know if you have any other questions.

Realized that I never thanked you for your reply. Yes, this is clear and helpful! Used both mdoules since.

Hi,

Thanks for the video, I don't suppose you can help me with styling? I can see the .css file in the module directory but there's no content in it. I need to change the default white/grey to something that matches my theme.

Thanks
Paul

Hello & thinx;
can we add view accordion in body of article.
tinx

Post new comment