Divi Show / Hide Module Grouping Option


The Divi Show / Hide Button module lets you reveal Divi Builder elements with the click of a button. Sometimes you may wish to apply custom styles to the button when it has been "activated", i.e. clicked.

One way you can do it is to use the grouping option. If you set a value for the "Show / Hide Button Settings > Grouping > Group Name" option, that value will be set as a CSS class on the module.

Then when the button is clicked, another class "dshb-active-button" is also assigned to the module. This lets you style the button when it is "active", using 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


Submit a Comment

Your email address will not be published.