Divi Show / Hide Button is a module for Divi which can be used to easily show and hide content at the click of a button. If you'd like to change the styles of the button when it is "active", i.e. after it has been clicked and the content revealed, here's how.
Using the Module Setting Design Options
The module's settings include options for styling the button's active state. You can find these at:
Show / Hide Button Settings > Design > Active Button
Like so:
These options are available from v1.3.3 upwards.
Using CSS
When the show / hide button module is active, the ".dshb-active-button" gets added to the module's outer element. That means you can use CSS to style the button like so:
body #page-container .et_pb_section div.et_pb_db_show_hide_button.dshb-active-button a.et_pb_button {
color: red !important;
}(The rather long selector is needed to ensure the default styles get overridden correctly).
Hello ! Love this feature, however is it possible to make one of the buttons already active on loading ?
Thanks :)
Hey Adrien, you should be able to do it by setting "Show / Hide Button Settings > Advanced > CSS ID & Classes > CSS Class" to "dshb-active-button". The module basically uses this class to track whether a button is active or not, so manually setting the class should make it treat the button as active initially.
I hope that helps, but let me know if it doesn't do what you need. Thanks!
It works perfectly thank you Dan !
Great! Thanks for letting me know, Adrien :)