Styling the Divi Show / Hide Button when "Active"

|

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).

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

4 Comments

  1. Hello ! Love this feature, however is it possible to make one of the buttons already active on loading ?
    Thanks :)

    Reply
    • 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!

      Reply
      • It works perfectly thank you Dan !

        Reply
        • Great! Thanks for letting me know, Adrien :)

          Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.