Removing the triangle icon on the Genesis Accordion Block and add Font Awesome instead

Update 2021: The Webkit details marker selector is depreciated, so I updated the code below.

It’s been kind of bugging me for a while: The triangle icon before the title on the Genesis Accordion Block (formerly Atomic Blocks Accordion Block).

Genesis Accordion Block with the triangle in place
The Accordion Block with the triangle

Today I searched for a solution and found one. Thought I share the code here for future reference and for everyone who happen to stumble upon this post. Here is the CSS snippet that makes the triangle go away.

.gb-block-accordion details > summary {
  list-style: none;
}

.gb-block-accordion details > summary::marker {
  display: none;
}

I found the solution on Stack Overflow after a thread on the Atomic Blocks forum learned me that this triangle was browser generated.

Other styling adjustments

To make it fit my need, I made a few more styling adjustments. I changed the background color, added a box shadow and applied some Font Awesome icons to replace the triangle. This is the result.

Some Random Title in the Accordion Block

This is how the accordion looks now.

Here is a snippet of the CSS (click here for the raw snippet).

Want to add some smooth transitions as well? This article explains how to add some animations to the details element.

Affiliate Disclosure

Some articles may contain affiliate links. This means I receive a small commission when you make a purchase through one of these links. However I will never recommend products that I do not support.

This site uses functional cookies. More information

Deze site is standaard ingesteld op 'cookies toestaan", om je de beste mogelijke blader ervaring te geven. Als je deze site blijft gebruiken zonder je cookie instellingen te wijzigen, of als je klikt op "Accepteren" hieronder, dan geef je toestemming voor het gebruik van Cookies.

Sluiten