Divi Show / Hide Module Grouping Option

|

The Divi Show / Hide Button module lets you reveal Divi Builder elements with the click of a button. Once clicked, the button becomes "activate", which can be used for example, to style it differently. If you'd like to set up a group of buttons where only one button is active at a time, you can use the "Grouping" option. 

Adding a Button to a Group

To place a button into a group, enter a name for the group in the "Show / Hide Button Settings > Grouping > Group Name(s)" option. The name should consist of lower-case characters and hyphens only, e.g:

Use the same group name in the "Grouping" option of each other button you want to add to the group. Once each button is added to the group, activating one button will automatically deactivate the others in the group.

Note that the module's group name will also be added as a CSS class on the module.

Placing a Button in More than One Group

You can also place a button in multiple groups at the same time by entering a comma-separated list of group names into the "Group Name(s)" field, e.g. "my-group, my-second-group". Support for multiple group names was added in v1.4.2.

Styling the Active Button in a Group

When the button is clicked, another class "dshb-active-button" is also assigned to the module.

You can use the built in style options to style the active state of the button.

Alternatively, you can style the active button in your group with CSS such as this:

.my-group.dshb-active-button .et_pb_button { 
    color: red !important; 
    background-color: yellow;
}
The "dshb-active-button" class will be removed if the button is clicked again (i.e. the revealed section is re-hidden). If there are any other other buttons assigned to the same group, then clicking on one of those buttons will likewise remove the "dshb-active-button" class from the originally active button and apply it to the newly clicked button instead.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.