How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags

by DS | Feb 24, 2026 | Etcetera | 0 comments

Add-Toggle-CSS-to-the-Column-Housing-the-Group-1

Accordions and toggle content material subject matter have traditionally required JavaScript to take care of the interaction accurately. Fashionable HTML accommodates native portions that get you closer to a non-JavaScript style of that.

and

portions create useful disclosure widgets the usage of now not anything else on the other hand a couple of simple portions. The ones portions take care of magnify/collapse behavior routinely, fortify keyboard interaction out of the sphere, and art work without any additional JavaScript.

Divi 5’s Semantic Parts allow shoppers to art work with the ones native HTML portions (and various others) at once during the Visible Builder. You’ll bring together toggles the usage of Divi’s layout portions while outputting clean, semantic HTML that browsers understand natively. This publish covers assemble a custom designed toggle the usage of Divi 5’s Section Type settings, Divi design settings, and a couple of simple CSS to make it all in truth simple.

Table of Contents

Understanding The Details And Summary Portions

The

element creates a disclosure widget that buyers can open and close. The

element provides the clickable label that toggles visibility of the content material subject matter enclosed within

. The whole lot within

that isn’t the

remains hidden until the patron clicks to magnify it.

Browsers render a small disclosure triangle next to the summary text. Clicking anywhere on the summary toggles the visibility of the rest content material subject matter. The element is keyboard-accessible thru nature, and visual display unit readers can announce the expanded or collapsed state by the use of native semantics. That suggests you normally do not have ARIA to be in contact the open or closed state, given that portions do that natively.

The

element moreover accepts an open function to turn the content material subject matter expanded thru default. Together with a shared name function to a few

portions groups them into an distinctive accordion where only one may also be open at a time. This is a more recent enhancement, so take a look at if you want to must fortify older browsers.

Building Toggles With Divi 5’s Semantic Portions

This fashion uses Divi 5’s Section Type strategy to assign semantic HTML tags to packing containers and modules. The outcome’s a toggle built only during the Visual Builder that outputs right kind

and

markup. This isn’t the usage of the Toggle Module the least bit — just a Personnel and a couple of Text Modules.

Setting Up The Development

The toggle calls for three portions: a Workforce Module that becomes the

wrapper, a child element that becomes the

label, and a sibling element that holds the collapsible content material subject matter.

Add a Row to your internet web page with a single-column layout. Within that Column, add a Personnel Module. This Personnel will serve as the outer

container. Using a Personnel Module instead of the Column itself means that you can stack a few toggles within the identical Column.

Pass ahead and elegance your heading if you want to must make it easy to be informed.

Converting The Personnel To A Details Section

Click on at the Personnel Module to open its settings. Navigate to the Advanced tab and in finding the HTML selection personnel. Click on at the Section Type dropdown and choose details from the available possible choices.

This changes the Personnel’s HTML output from a generic

to a

element. The Personnel helps to keep all its visual styling and layout options while gaining the native toggle behavior.

Together with The Summary Section

Right through the Personnel, add a Text Module. This module will turn out to be the clickable toggle header. Open the Text Module settings and move to the Advanced tab. Throughout the HTML selection personnel, trade the Section Type to summary. Return to the Content material subject matter tab and enter your toggle header text. This newsletter becomes the clickable label that buyers interact with to magnify and cave within the toggle.

At this point, the toggle turns out broken — no disclosure triangle, and clicking does now not anything else. On account of we used a pre-existing module, some sorts combat with the browser-native detail and summary portions. On the other hand, we’ll be customizing the toggle ourselves anyway, so we’ll restore the entire thing with custom designed CSS. This will infrequently give us further ways to style it.

Together with The Collapsible Content material subject matter

Add each and every different Text Module within the identical Personnel, positioned underneath the summary Text Module. This module holds the content material subject matter that appears when the toggle is expanded. Go away the Section Type at its default of

. Enter the content material subject matter you need to turn when the toggle is opened. This will include formatted text, links, or any content material subject matter the Text Module is helping. You’ll moreover add additional modules (photos, buttons, and so on.).

Together with The Disclosure Chevron

Let’s add some basic sorts to the Personnel, along with a background color, padding (merely on the best, left, and right kind, no longer the bottom), and a border radius.

Now onto the toggle. The toggle needs CSS to turn a visual indicator. This CSS supplies a chevron from Divi’s built-in icon font that sits after the summary text and flips 180 ranges when the toggle opens. Add it to the Column protective the toggles underneath Advanced > CSS > Free-Form CSS:

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

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

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

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

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

Add Toggle CSS to the Column Housing the Group

Let me provide an explanation for each part of the code and show you what each does through successive films.

First, we totally remove the default triangle used. We can use our private icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a continuing icon. Divi includes a custom designed icon font referred to as ETmodules. Instead of usual characters, this font maps specific keys to icons already loaded up by the use of the Theme. Setting the font-family to “ETmodules” and the content material subject matter to “33” renders a downward-pointing chevron.

Now, inside the

Text Module, set display to Flex and set flex-direction to Row. While in Structure possible choices, set Justify Content material subject matter to House Between. This helps to keep the text and chevron aligned on the identical line, with the ::after pseudo-element hanging the icon after the summary text, and pushes the text and icon to the edges.

The next part of the CSS is in charge of the animation when the toggle is clicked. We use a become to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.

After all, there’s CSS that selects all items during the personnel (except for for the remainder wrapped inside the

tag) and applies bottom padding to each products. This automates assigning the padding after each child element, in order that you don’t will have to do it manually.

Not very important, on the other hand if you want to visually divide the summary from the content material subject matter, add a bottom border to the summary Text Module. Throughout the Design tab, move to the Border selection personnel. Find the Bottom Border settings area and set its width to 1px. Switch to the Spacing selection personnel and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).

And, if we would have liked a few toggles on this internet web page, we will be able to simply reproduction the group and keep watch over the content material subject matter within.

Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject matter types and modules can be used during the toggle.

Smart Use Cases For HTML Toggles

Browser-native

and

tags offer a lightweight, to be had resolution for organizing content material subject matter without the potency worth of JavaScript. While most typically used for Frequently Asked Questions — ceaselessly used for FAQ sections, and also you’ll pair them with FAQ structured data if you’re intentionally together with schema markup.

Think you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated shoppers can scan the internet web page effectively.

This Section combo moreover effectively manages visual display unit exact belongings thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or large code blocks in technical tutorials, and even simplifying cell interfaces thru housing complicated e-commerce filters or navigation menus behind a clean, interactive label.

Take a look at Semantic Portions In Divi 5 These days!

Divi 5‘s Semantic Portions serve as lets you assemble with native HTML at once inside the Visual Builder. The

and

portions send to be had, JavaScript-free toggles that art work in all stylish browsers. For many who had been on the lookout for a lighter-weight option to the Toggle Module, this can be a excellent selection for you now.

Take a look at it in your next FAQ section or product internet web page — the setup takes minutes, and the outcome’s cleaner markup than any plugin will also be providing.

Obtain Divi 5 Be informed Extra About Divi 5

The publish How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]