Plan Requirement: Team Plan and up

Zendesk level: Intermediate
Knowledge: HTML & CSS
Time Required: 15 minutes

Live demo

This snippet of code will allow you to have accordions on your Home Page. Accordions allow your HomePage to be more compact and allows your end users to easily find what they are looking for. Accordions seem to be widely used across Help Centers and Zendesk themselves use accordions on all of their Help Centers.

I've also included the code for you to have Accordions on your Category Page is you wish to use accordions there as well.

GETTING STARTED

In order to shorten this article, you can find all the code here. (recommend opening this in a new tab)

QUICK SUMMARY

We will be working with the following tabs

HTML
CSS

STEP 1

From the HTML tab open "Document Head" page.

Copy and paste the code (from the link above).

STEP 2

From the HTML tab open "Home" page.

Copy and paste the code (from the link above) overwriting the default Copenhagen theme code.

STEP 3

From the CSS Tab

Copy and paste the code (from the link above) at the very bottom or top of the CSS tab.

STEP 4

From the CSS Tab

Edit the colors, padding, etc to change the accordions to blend in with your theme's colors and design.

If you have any questions along the way - please post them below.

ENJOY!