Accordions and toggle content material subject material have traditionally required JavaScript to take care of the interaction as it should be. Fashionable HTML incorporates native portions that get you closer to a non-JavaScript fashion of that.
Divi 5’s Semantic Parts allow consumers to art work with the ones native HTML portions (and quite a lot of others) at once right through the Visible Builder. You’ll compile toggles using Divi’s layout portions while outputting clean, semantic HTML that browsers understand natively. This post covers assemble a custom designed toggle using Divi 5’s Section Type settings, Divi design settings, and a couple of simple CSS to make it all actually simple.
Working out The Details And Summary Portions
The
element provides the clickable label that toggles visibility of the content material subject material enclosed within
. The whole thing inside
that isn’t the
remains hidden until the shopper 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 remaining content material subject material. The element is keyboard-accessible thru nature, and visual display unit readers can announce the expanded or collapsed state by means of native semantics. That suggests you in most cases don’t 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 material expanded thru default. Together with a shared identify function to a few
portions groups them into an distinctive accordion where only one can also be open at a time. This is a more recent enhancement, so test if you want to need to support older browsers.
Construction Toggles With Divi 5’s Semantic Portions
This fashion uses Divi 5’s Section Type option to assign semantic HTML tags to containers and modules. The outcome’s a toggle built only right through the Visual Builder that outputs right kind
and
markup. This isn’t using the Toggle Module the least bit — just a Team of workers and a couple of Text Modules.
Surroundings 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 material.
Add a Row to your internet web page with a single-column layout. Within that Column, add a Team of workers Module. This Team of workers will serve as the outer
container. The use of a Team of workers Module instead of the Column itself means that you can stack a few toggles within the an identical Column.
Pass ahead and style your heading if you want to need to make it easy to be told.
Converting The Team of workers To A Details Section
Click on at the Team of workers Module to open its settings. Navigate to the Complicated tab and in finding the HTML selection team of workers. Click on at the Section Type dropdown and select details from the available possible choices.
This changes the Team of workers’s HTML output from a generic
to a
element. The Team of workers helps to keep all its visual styling and layout options while gaining the native toggle behavior.
Together with The Summary Section
Right through the Team of workers, add a Text Module. This module will grow to be the clickable toggle header. Open the Text Module settings and cross to the Complicated tab. Throughout the HTML selection team of workers, trade the Section Type to summary. Return to the Content material subject material tab and enter your toggle header text. This text becomes the clickable label that consumers 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 fight 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 likely once in a while give us additional ways to style it.
Together with The Collapsible Content material subject material
Add each and every different Text Module inside the an identical Team of workers, situated underneath the summary Text Module. This module holds the content material subject material that appears when the toggle is expanded. Leave the Section Type at its default of
. Enter the content material subject material you need to turn when the toggle is opened. This will likely include formatted text, links, or any content material subject material 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 fundamental sorts to the Team of workers, 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 Complicated > CSS > Free-Form CSS:
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content material subject material: "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 > :no longer(summary) {
padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}
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 will use our non-public icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a relentless icon. Divi includes a custom designed icon font referred to as ETmodules. As an alternative of standard characters, this font maps specific keys to icons already loaded up by means of the Theme. Surroundings the font-family to “ETmodules” and the content material subject material 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 material to House Between. This helps to keep the text and chevron aligned on the an identical line, with the ::after pseudo-element striking the icon after the summary text, and pushes the text and icon to the sides.
The next part of the CSS is in charge of the animation when the toggle is clicked. We use a transform to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.
In any case, there’s CSS that selects all items right through the team of workers (apart from for the remaining 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 crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
and
tags offer a lightweight, to be had resolution for organizing content material subject material without the potency price of JavaScript. While most typically used for Ceaselessly Asked Questions — continuously used for FAQ sections, and also you’ll pair them with FAQ structured data if you are intentionally together with schema markup.
Suppose you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated consumers can scan the internet web page effectively.
This Section combo moreover effectively manages visual display unit precise assets thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or massive code blocks in technical tutorials, and even simplifying cell interfaces thru housing complex e-commerce filters or navigation menus behind a clean, interactive label.
Take a look at Semantic Portions In Divi 5 Today!
Divi 5‘s Semantic Portions serve as allows you to 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 looking for a lighter-weight option to the Toggle Module, it is a very good 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 end result’s cleaner markup than any plugin may also be providing.
The post How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.
remains hidden until the shopper 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 remaining content material subject material. The element is keyboard-accessible thru nature, and visual display unit readers can announce the expanded or collapsed state by means of native semantics. That suggests you in most cases don’t 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 material expanded thru default. Together with a shared identify function to a few
portions groups them into an distinctive accordion where only one can also be open at a time. This is a more recent enhancement, so test if you want to need to support older browsers.
Construction Toggles With Divi 5’s Semantic Portions
This fashion uses Divi 5’s Section Type option to assign semantic HTML tags to containers and modules. The outcome’s a toggle built only right through the Visual Builder that outputs right kind
and
markup. This isn’t using the Toggle Module the least bit — just a Team of workers and a couple of Text Modules.
Surroundings 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 material.
Add a Row to your internet web page with a single-column layout. Within that Column, add a Team of workers Module. This Team of workers will serve as the outer
container. The use of a Team of workers Module instead of the Column itself means that you can stack a few toggles within the an identical Column.
Pass ahead and style your heading if you want to need to make it easy to be told.
Converting The Team of workers To A Details Section
Click on at the Team of workers Module to open its settings. Navigate to the Complicated tab and in finding the HTML selection team of workers. Click on at the Section Type dropdown and select details from the available possible choices.
This changes the Team of workers’s HTML output from a generic
to a
element. The Team of workers helps to keep all its visual styling and layout options while gaining the native toggle behavior.
Together with The Summary Section
Right through the Team of workers, add a Text Module. This module will grow to be the clickable toggle header. Open the Text Module settings and cross to the Complicated tab. Throughout the HTML selection team of workers, trade the Section Type to summary. Return to the Content material subject material tab and enter your toggle header text. This text becomes the clickable label that consumers 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 fight 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 likely once in a while give us additional ways to style it.
Together with The Collapsible Content material subject material
Add each and every different Text Module inside the an identical Team of workers, situated underneath the summary Text Module. This module holds the content material subject material that appears when the toggle is expanded. Leave the Section Type at its default of
. Enter the content material subject material you need to turn when the toggle is opened. This will likely include formatted text, links, or any content material subject material 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 fundamental sorts to the Team of workers, 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 Complicated > CSS > Free-Form CSS:
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content material subject material: "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 > :no longer(summary) {
padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}
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 will use our non-public icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a relentless icon. Divi includes a custom designed icon font referred to as ETmodules. As an alternative of standard characters, this font maps specific keys to icons already loaded up by means of the Theme. Surroundings the font-family to “ETmodules” and the content material subject material 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 material to House Between. This helps to keep the text and chevron aligned on the an identical line, with the ::after pseudo-element striking the icon after the summary text, and pushes the text and icon to the sides.
The next part of the CSS is in charge of the animation when the toggle is clicked. We use a transform to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.
In any case, there’s CSS that selects all items right through the team of workers (apart from for the remaining 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 crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
and
tags offer a lightweight, to be had resolution for organizing content material subject material without the potency price of JavaScript. While most typically used for Ceaselessly Asked Questions — continuously used for FAQ sections, and also you’ll pair them with FAQ structured data if you are intentionally together with schema markup.
Suppose you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated consumers can scan the internet web page effectively.
This Section combo moreover effectively manages visual display unit precise assets thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or massive code blocks in technical tutorials, and even simplifying cell interfaces thru housing complex e-commerce filters or navigation menus behind a clean, interactive label.
Take a look at Semantic Portions In Divi 5 Today!
Divi 5‘s Semantic Portions serve as allows you to 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 looking for a lighter-weight option to the Toggle Module, it is a very good 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 end result’s cleaner markup than any plugin may also be providing.
The post How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.
Construction Toggles With Divi 5’s Semantic Portions
This fashion uses Divi 5’s Section Type option to assign semantic HTML tags to containers and modules. The outcome’s a toggle built only right through the Visual Builder that outputs right kind
markup. This isn’t using the Toggle Module the least bit — just a Team of workers and a couple of Text Modules.
Surroundings 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 material.
Add a Row to your internet web page with a single-column layout. Within that Column, add a Team of workers Module. This Team of workers will serve as the outer
container. The use of a Team of workers Module instead of the Column itself means that you can stack a few toggles within the an identical Column.
Pass ahead and style your heading if you want to need to make it easy to be told.
Converting The Team of workers To A Details Section
Click on at the Team of workers Module to open its settings. Navigate to the Complicated tab and in finding the HTML selection team of workers. Click on at the Section Type dropdown and select details from the available possible choices.
This changes the Team of workers’s HTML output from a generic
to a
element. The Team of workers helps to keep all its visual styling and layout options while gaining the native toggle behavior.
Together with The Summary Section
Right through the Team of workers, add a Text Module. This module will grow to be the clickable toggle header. Open the Text Module settings and cross to the Complicated tab. Throughout the HTML selection team of workers, trade the Section Type to summary. Return to the Content material subject material tab and enter your toggle header text. This text becomes the clickable label that consumers 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 fight 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 likely once in a while give us additional ways to style it.
Together with The Collapsible Content material subject material
Add each and every different Text Module inside the an identical Team of workers, situated underneath the summary Text Module. This module holds the content material subject material that appears when the toggle is expanded. Leave the Section Type at its default of
. Enter the content material subject material you need to turn when the toggle is opened. This will likely include formatted text, links, or any content material subject material 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 fundamental sorts to the Team of workers, 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 Complicated > CSS > Free-Form CSS:
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content material subject material: "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 > :no longer(summary) {
padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}
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 will use our non-public icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a relentless icon. Divi includes a custom designed icon font referred to as ETmodules. As an alternative of standard characters, this font maps specific keys to icons already loaded up by means of the Theme. Surroundings the font-family to “ETmodules” and the content material subject material 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 material to House Between. This helps to keep the text and chevron aligned on the an identical line, with the ::after pseudo-element striking the icon after the summary text, and pushes the text and icon to the sides.
The next part of the CSS is in charge of the animation when the toggle is clicked. We use a transform to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.
In any case, there’s CSS that selects all items right through the team of workers (apart from for the remaining 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 crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
and
tags offer a lightweight, to be had resolution for organizing content material subject material without the potency price of JavaScript. While most typically used for Ceaselessly Asked Questions — continuously used for FAQ sections, and also you’ll pair them with FAQ structured data if you are intentionally together with schema markup.
Suppose you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated consumers can scan the internet web page effectively.
This Section combo moreover effectively manages visual display unit precise assets thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or massive code blocks in technical tutorials, and even simplifying cell interfaces thru housing complex e-commerce filters or navigation menus behind a clean, interactive label.
Take a look at Semantic Portions In Divi 5 Today!
Divi 5‘s Semantic Portions serve as allows you to 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 looking for a lighter-weight option to the Toggle Module, it is a very good 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 end result’s cleaner markup than any plugin may also be providing.
The post How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.
label, and a sibling element that holds the collapsible content material subject material.
Add a Row to your internet web page with a single-column layout. Within that Column, add a Team of workers Module. This Team of workers will serve as the outer
container. The use of a Team of workers Module instead of the Column itself means that you can stack a few toggles within the an identical Column.
Pass ahead and style your heading if you want to need to make it easy to be told.
Converting The Team of workers To A Details Section
Click on at the Team of workers Module to open its settings. Navigate to the Complicated tab and in finding the HTML selection team of workers. Click on at the Section Type dropdown and select details from the available possible choices.
This changes the Team of workers’s HTML output from a generic
to a
element. The Team of workers helps to keep all its visual styling and layout options while gaining the native toggle behavior.
Together with The Summary Section
Right through the Team of workers, add a Text Module. This module will grow to be the clickable toggle header. Open the Text Module settings and cross to the Complicated tab. Throughout the HTML selection team of workers, trade the Section Type to summary. Return to the Content material subject material tab and enter your toggle header text. This text becomes the clickable label that consumers 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 fight 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 likely once in a while give us additional ways to style it.
Together with The Collapsible Content material subject material
Add each and every different Text Module inside the an identical Team of workers, situated underneath the summary Text Module. This module holds the content material subject material that appears when the toggle is expanded. Leave the Section Type at its default of
. Enter the content material subject material you need to turn when the toggle is opened. This will likely include formatted text, links, or any content material subject material 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 fundamental sorts to the Team of workers, 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 Complicated > CSS > Free-Form CSS:
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content material subject material: "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 > :no longer(summary) {
padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}
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 will use our non-public icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a relentless icon. Divi includes a custom designed icon font referred to as ETmodules. As an alternative of standard characters, this font maps specific keys to icons already loaded up by means of the Theme. Surroundings the font-family to “ETmodules” and the content material subject material 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 material to House Between. This helps to keep the text and chevron aligned on the an identical line, with the ::after pseudo-element striking the icon after the summary text, and pushes the text and icon to the sides.
The next part of the CSS is in charge of the animation when the toggle is clicked. We use a transform to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.
In any case, there’s CSS that selects all items right through the team of workers (apart from for the remaining 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 crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
and
tags offer a lightweight, to be had resolution for organizing content material subject material without the potency price of JavaScript. While most typically used for Ceaselessly Asked Questions — continuously used for FAQ sections, and also you’ll pair them with FAQ structured data if you are intentionally together with schema markup.
Suppose you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated consumers can scan the internet web page effectively.
This Section combo moreover effectively manages visual display unit precise assets thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or massive code blocks in technical tutorials, and even simplifying cell interfaces thru housing complex e-commerce filters or navigation menus behind a clean, interactive label.
Take a look at Semantic Portions In Divi 5 Today!
Divi 5‘s Semantic Portions serve as allows you to 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 looking for a lighter-weight option to the Toggle Module, it is a very good 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 end result’s cleaner markup than any plugin may also be providing.
The post How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.
Pass ahead and style your heading if you want to need to make it easy to be told.
Converting The Team of workers To A Details Section
Click on at the Team of workers Module to open its settings. Navigate to the Complicated tab and in finding the HTML selection team of workers. Click on at the Section Type dropdown and select details from the available possible choices.
This changes the Team of workers’s HTML output from a generic
Together with The Summary Section
Right through the Team of workers, add a Text Module. This module will grow to be the clickable toggle header. Open the Text Module settings and cross to the Complicated tab. Throughout the HTML selection team of workers, trade the Section Type to summary. Return to the Content material subject material tab and enter your toggle header text. This text becomes the clickable label that consumers 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 fight 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 likely once in a while give us additional ways to style it.
Together with The Collapsible Content material subject material
Add each and every different Text Module inside the an identical Team of workers, situated underneath the summary Text Module. This module holds the content material subject material that appears when the toggle is expanded. Leave the Section Type at its default of
Together with The Disclosure Chevron
Let’s add some fundamental sorts to the Team of workers, 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 Complicated > CSS > Free-Form CSS:
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content material subject material: "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 > :no longer(summary) {
padding-bottom: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem);
}
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 will use our non-public icon. Marker rendering and styling vary thru browser, so this CSS eliminates them where supported and replaces them with a relentless icon. Divi includes a custom designed icon font referred to as ETmodules. As an alternative of standard characters, this font maps specific keys to icons already loaded up by means of the Theme. Surroundings the font-family to “ETmodules” and the content material subject material 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 material to House Between. This helps to keep the text and chevron aligned on the an identical line, with the ::after pseudo-element striking the icon after the summary text, and pushes the text and icon to the sides.
The next part of the CSS is in charge of the animation when the toggle is clicked. We use a transform to rotate it 180 ranges when expanded, so the chevron problems down when collapsed and up when open.
In any case, there’s CSS that selects all items right through the team of workers (apart from for the remaining 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 crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
and
tags offer a lightweight, to be had resolution for organizing content material subject material without the potency price of JavaScript. While most typically used for Ceaselessly Asked Questions — continuously used for FAQ sections, and also you’ll pair them with FAQ structured data if you are intentionally together with schema markup.
Suppose you need to hide dense technical specifications, warranty details, or “beginner-level” context in documentation so that complicated consumers can scan the internet web page effectively.
This Section combo moreover effectively manages visual display unit precise assets thru tucking away spoilers and puzzle solutions, collapsing lengthy video transcripts or massive code blocks in technical tutorials, and even simplifying cell interfaces thru housing complex e-commerce filters or navigation menus behind a clean, interactive label.
Take a look at Semantic Portions In Divi 5 Today!
Divi 5‘s Semantic Portions serve as allows you to 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 looking for a lighter-weight option to the Toggle Module, it is a very good 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 end result’s cleaner markup than any plugin may also be providing.
The post How To Create Browser-Local Toggles The usage of Divi 5’s Semantic Tags gave the impression first on Sublime Subject matters Weblog.
Not crucial, on the other hand if you want to visually divide the summary from the content material subject material, add a bottom border to the summary Text Module. Throughout the Design tab, cross to the Border selection team of workers. Find the Bottom Border settings house and set its width to 1px. Switch to the Spacing selection team of workers and set the bottom padding to clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem).
And, if we wanted a few toggles on this internet web page, we will be able to simply copy the group and control the content material subject material within.
Now, we will be able to add an image underneath the second Text Module, merely to show that a few content material subject material varieties and modules can be used right through the toggle.
Smart Use Cases For HTML Toggles
Browser-native
0 Comments