Search

How to Add Icon to Opened Item on Divi Accordion Module

The Divi Accordion module is an excellent way to display content in a collapsible format. However, by default, only the closed accordion items have an icon. This can be inconvenient if you want your users to be able to identify which accordion item is currently open easily.

This article will show you how to add an icon to the opened item on the Divi Accordion module. This simple process can be done using a few lines of CSS code.

Steps to Add Icon to the Opened Item on Divi Accordion Module

Step 1: Add the CSS Class

First, we will add the CSS class to your Accordion module.

Go to the Divi Builder, add a new Accordion module, or select the existing one.

Go to the Advanced tab -> CSS ID & Classes on the module settings. Afterward, add “wppb-add-accordion-icon” to the CSS Class input field.

Step 2: Add the CSS Snippet

Next, we will add the CSS snippet to your site. You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page (Page Settings and Code Module Settings). In this example, we will put the code on the Page Settings.

Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.

/*add the icons to the opened accordions*/
.wppb-add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	content: "\e04f";
}

The Code Explanation:

This CSS code targets an Accordion module with the class “wppb-add-accordion-icon” and adds a custom icon (represented by the Unicode character “\e04f“.

  • .et_pb_accordion_item.et_pb_toggle_open: These classes are applied to the accordion items when they are open.
  • .et_pb_toggle_title: This pseudo-element is used to insert content before the accordion title.
  • display: block;: This CSS property tells the browser to display the icon as a block element.

You can change the icon by replacing the uni code characters (\e04f) in the CSS snippet. Click here to learn more about Divi’s built-in icons collection and how to insert the Unicode into the CSS snippet.

That’s it. Now, your opened item on the Accordion module has the icon. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows how easily you can add an icon to the opened item on the Divi Accordion module. Adding an icon to the opened item on a Divi Accordion module is a simple process that can be done using a CSS snippet. This can be a helpful way to indicate to users which accordion items are open visually.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.