Copenhagen Theme - Home Page Accordions

ModeratorWes

• March 03, 2017 14:51

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!

 

• Brett Bowser

  • March 19, 2019 16:24

  Zendesk Community Manager

  Glad to hear it Nikolay :)

• Devin August Ornstein

  • September 12, 2023 10:56

  I've successfully added this code into our Knowledge Base. However, when an agent accesses the Knowledge Base (Guide) in the side panel, while working on a ticket, the accordions don't work or appear. Does anyone have any ideas?

• Brett Bowser

  • September 12, 2023 16:13

  Zendesk Community Manager

  Hey Devin, 
   
  Can you confirm that you've enabled Display Unsafe Content in your Guide Admin Settings?  You can find this under:
   
  

  1. In Guide, click the Settings icon () in the sidebar.
  2. Under Security, select the Display Unsafe Content option.
  3. Click Update.

   
  Let me know if this option is enabled and it's still not working on your end.
   
  Cheers!
  
• Devin August Ornstein

  • September 13, 2023 08:36

  Brett Bowser

  Hi Brett! Thanks for your response. For now, I've been told we're not approved to enable 'unsafe content' in our Zendesk Knowledge Base just yet. 

  Is that the only fix for this? That we need to enable unsafe content for the accordions to work in the side panel?

  What exactly about the content makes it unsafe for end users? I understand it's a security issue, is that right?

• Brett Bowser

  • September 13, 2023 14:25

  Zendesk Community Manager

  Hey Devin,
   
  Great question! 
  
  There are safe HTML tags and attributes that are allowed to be put in your articles by default. Other tags and attributes that are outside of those in the list are considered "unsafe". This functionality is designed to protect your end-users who will be browsing through your articles and what it does is to prevent these elements to be sent to the browser of your end-users and executed when opening your articles.
   
  To answer your question, the warning applies to the editors who might accidentally insert unsafe HTML tags/use unsafe HTML attributes to your articles. This is a default web development standard for security across sites.
   
  If you are sure that the elements that you are adding are safe/won't cause any security issues, then you may enable this option and proceed. Here's an example scenario where an editor will need to enable this option - Why are videos not displaying in Help Center?
   
  Hope this information helps!
  

Please sign in to leave a comment.