How To Create an Advanced Accordion View in Drupal 9
Here is a scenario someone posed to us:
“I have a content type “Staff Member” with fields of photo department, title, first name, last name, phone, email, and department head (which is a Boolean). He wants to have a staff page view that lists all of the staff members with all of the fields by the field department grouped in an accordion( jQuery UI Accordion). Inside each accordion the department head should float to the top, and the rest should be sorted alphabetically. I want to use views for this. Am I on the right track?”
Answer: Absolutely! You’re on the right track.
We need a couple of modules, but it’s not that complex after all.
So here I am pictured below on the finished product, and as I mentioned, we need a couple of modules.
We need the jQuery UI Accordion module which the person actually identified in their question.
In order to get this to work, we need the jQuery UI, but we also need one more module. We need the Views Accordion Module. That is what’s going to give us the actual accordion display inside of Drupal. The Views Accordion Module requires the jQuery UI accordion, and as you can see below in Drupal 9, jQuery UI was removed from core. That is why we need the jQuery UI Accordion.
Install all three modules: jQuery UI, Views Accordion Module, and jQuery UI Accordion.
Now Edit the view.
Pictured below is the view, it is a page view and the format is jQuery UI Accordion which is a new format given once we add that module.
Click the jQuery UI Accordion.
You need to decide how it’s grouped. You can not do this until you add your fields. It is important to note You can not use this using a teaser display.
The teaser display does NOT include the option to group on a particular field, so you have to use fields.
I went ahead and added all the fields that our user specified: Staff Title, Staff Department Head, Staff Department (which is hidden, but is required in order to group the accordion), First name, Last name, Staff Email, and Staff Phone.
I added them, but I hid them all because I included them in the Title field. I also have the Body and the Staff Photo which are not included in the Title. Scrolling down to our preview that is what it looks like below.
The filter is published staff members and the sort criteria is Staff Department Head, one of the requirements.
Put the Staff Department Head up to the top, that is a boolean field and that is why it is listed here and then hidden, and then Last Name (ascending) gives everybody after that.
Once you have your fields click on the settings for the jQuery Accordion.
The grouping is by Staff Department. I also Selected Use rendered output to group rows and Use the group header as the Accordion header.
There is no second level grouping required for this.
For the settings I Checked collapsible, None for Row to display opened on start, Swing for the Animation effect, 300 milliseconds for the Animation Time, and I made it appear on click by setting Event to Click.
Then I just rearranged the fields in the order that I needed them.
The person’s Title is their name. Even though there is a First and Last name field we hide those because we want to sort by Last name and Title is by first name so that is why we do that. The Staff Department Head is listed and so below in my preview you will see the word Department Head next to my name (which again is a Boolean field in the content type).
First Name and Last Name are hidden, Then the Body field, then Staff Email and Staff Phone which are hidden, and then Staff Photo.
In the Staff Title I rewrote the results with the fields that had already been listed and you can do that with replacement patterns that are listed below.
I have not added any CSS at all to this view so it is not exactly perfect, but it gets us 99% of the way.
So once again, if I look at it on my site and click on web, there is me with an h3 tag, and it is linked to my profile. The fact that I am a Department Head, my bio, my picture, and the three fields combined: the title, the phone field, and the email field (both of which are clickable) are all displayed below.
Then Fred Johnson and Sue Lubber in alphabetical order by last name.
We add a couple of modules to give us the display , formatting, and the drop down that we need. Then we organize our fields appropriately, grouping them on staff heading and making sure Department Head floats to the top based on the Boolean output that it provides.
For a more in depth and personal tutorial be sure to watch the video version below!