Add an Image to the Tabs of an Accordion

We have received requests for customizing the tabs of an accordion by using an image for the background image or adding an image icon to the title of the tab.

Instead of a flat color, an image can be used as a background to the header of an accordion.

As seen in the accordion below:

an image is used for the background of the tabs
an image is used as part of the header text in the second tab
while a font awesome icon has been added to the third tab.

Follow along below for instructions on how to setup those accordion styles.

Adding an Image to the Background

Adding an Image to the Background Header Tab

Accordion Style

  <style>
  
  div.accordion div.ui-accordion-header-active
  {background-image: url("IMAGE PATH")!important;}
  
  
  div.accordion div.ui-accordion-header
  {background-image: url("IMAGE PATH")!important;}
  
  .ui-accordion .ui-accordion-header
  {background-image: url("IMAGE PATH")!important;}

 .ui-accordion-header-active, .ui-accordion-header-active:hover, .ui-tabs-active, .ui-tabs-active:hover
 {background-image: url("IMAGE PATH")!important;}
  
.ui-accordion-header, .ui-tabs-tab
 {background-image: url("IMAGE PATH")!important;}

  <style>

Create the Accordion and add it to a Content Page

Follow this tutorial to create an accordion if needed

Upload the image to your site using File Upload

Under Utilities, choose 'File Upload' to upload the image and copy the url for the image.

Add CSS to the content pageE

In 'Add/Edit Content' check the for 'Custom Header + Footer Javascripts'

Add the 'Accordion Style' code into the custom header box. Replace the IMAGE PATH in the code with the actual address of the image that had been uploaded to the site.

Adding an image icon to the Header Text

Adding an Image Icon to the Header Text

Upload the image to your site using File Upload

Under Utilities, choose 'File Upload' to upload the image and copy the url for the image.

Add the Image Code to the Accordion Header

Add the below HTML Code to add the image to the Header Text field of the Accordion Tab. Replace the IMAGE PATH in the code with the actual address of the image that had been uploaded to the site.

 <img src="IMAGE PATH">

Add Font Awesome as an Icon to the Header Text

Adding a Font Awesome Icon to the Header Text

Get the Font Awesome Icon code.

Add the Font Awesome Code

Add the Font Awesome Code to add the icon to the Header Text field of the Accordion Tab. Below is an example of a Font Awesome icon code

 <i class="fas fa-lock"></i>