How to create browser-native switches using Divi 5’s semantic tags

. Enter the content you want to appear when the switch opens. This can be formatted text, links, or other content that the Text module supports. You can also add additional modules (images, buttons, etc.).

Add the disclosure chevron

Let’s add some basic styles to the group, including a background color, padding (top, left, and right only, not bottom), and a border radius.

Now on to the switch. The switch needs CSS to display a visual indicator. This CSS adds an angle bracket from the built-in Divi icon font that sits behind the summary text and rotates 180 degrees when the switch is opened. Add it to the Column hold down the switches under Advanced > CSS > Freeform CSS:

details > summary {
 list-style: none;
 cursor: pointer;
}

details > summary::-webkit-details-marker {
 display: none;
}

details > summary::after {
 content: "\33";
 font-family: "ETmodules";
 font-size: 24px;
 margin-left: 10px;
 transition: transform 0.3s ease;
 line-height: 1;
 display: flex;
 align-items: center;
 justify-content: center;
}

details[open] > summary::after {
 transform: rotate(180deg);
}

.et_pb_group > :not(summary) {
 padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}

Let me explain each part of the code and show what each part does through successive videos.

First we remove the default triangle used completely. We will use our own icon. The appearance and style of markups varies between browsers, so this CSS removes them where supported and replaces them with a consistent icon. Divi includes a custom icon font called ETmodules. Instead of standard characters, this font assigns specific keys to icons already loaded through the theme. Set the font family to “ETmodules” and its content “\33” displays a downward-pointing chevron.

Now, in the

Text module, set display to Bow and set the flex direction to Row. In the Layout Options, set Content Justification to Space between. This keeps the text and angle bracket aligned on the same line, with the ::after pseudo-element that places the icon after the summary text and pushes the text and icon to the edges.

The next part of the CSS is responsible for the animation when the switch is clicked. We use a transformation to rotate it 180 degrees when expanded, the chevron points downward when collapsed and upward when open.

Finally, there’s CSS that selects all items within the group (except anything in the

tag) and applies bottom padding to each item. This automates the assignment of the padding after each child element, so you don’t have to do it manually.

Not necessary, but if you want to visually separate the summary from the content, add a bottom border to the summary text module. On the Design tab, go to the Border option group. Find the Bottom edge settings area and set the width to 1px. Move to the Distance option group and set the bottom padding clamp (0.7rem, 0.6rem + 0.6vw, 1.1rem).

And if we wanted multiple switches on this page, we could simply duplicate the group and customize the content within it.

Now we can add an image below the second text module, just to show that multiple content types and modules can be used within the switch.

Practical use cases for HTML switches

Browser native

And

tags provide a lightweight, accessible solution for organizing content without the performance costs of JavaScript. Although most commonly used for FAQs, it is often used for FAQ sections, and you can link them to structured FAQ data if you intentionally add schema markup.

Suppose you need to hide compact technical specifications, warranty details, or beginner-level context in the documentation so that advanced users can scan the page efficiently.

This Element combo also effectively manages screen real estate by tucking away spoilers and puzzle solutions, condensing long video transcripts or large blocks of code into tech tutorials, and even simplifying mobile interfaces by putting complex e-commerce filters or navigation menus behind a clean, interactive label.

Try Semantics in Divi 5 today!

Divi 5’s Semantic Elements feature lets you build directly in Visual Builder with native HTML. The

And

elements provide accessible, JavaScript-free switches that work in all modern browsers. If you have been looking for a lighter alternative to the Toggle Module, this is now an excellent option for you.

Try it in your next FAQ section or product page. Installation takes a few minutes and the result is cleaner layout than any plugin can provide.