The Divi Show / Hide Button Module adds a dedicated module to the Divi Builder. You can configure a button to show specific elements, hide existing content, or toggle visibility each time it is clicked.
Target elements using their CSS IDs, classes, or supported CSS selectors. You can also customize the button’s appearance, configure its active state, and group related buttons to create tab-like interfaces.
Whether you’re building a business website, landing page, portfolio, or content-rich website, this module gives you more control over how information is presented.
Key Features
- Show Hidden Content – Reveal selected sections, rows, or modules when visitors click a button.
- Hide Visible Elements – Let users hide content they no longer need to see.
- Toggle Content Visibility – Switch elements between visible and hidden states with repeated clicks.
- CSS Selector Targeting – Target individual elements using CSS IDs, classes, or supported selectors.
- Multiple Element Control – Show or hide several elements from a single button using comma-separated selectors.
- Initially Hidden Content – Configure selected elements to remain hidden when the page first loads.
- Custom Button Text – Create clear action labels such as “Read More,” “Show Details,” or “View Information.”
- Active-State Styling – Customize the button’s appearance when it is active.
- Dynamic Button Text – Change the button label when activated, then return to the original text when deactivated.
- Button Grouping – Group related buttons so activating one can deactivate another in the same group.
- Tab-Style Layouts – Build custom tab-like content interfaces by showing one content area while hiding others.
- Hover-Based Visibility – Configure supported actions to show or hide elements when the pointer enters or leaves a button.
- Divi Button Styling – Customize button colors, backgrounds, borders, spacing, and other available design settings.
- Transition Controls – Adjust the visibility transition duration to suit the interaction.
- Flexible Page Layouts – Use the module within compatible Divi Builder layouts, including supported Theme Builder layouts.
Perfect For
The Divi Show / Hide Button Module is useful for web designers, freelancers, agencies, business owners, bloggers, and developers who build websites with Divi.
It works well for expandable service descriptions, additional product details, portfolio information, FAQ content, pricing explanations, feature comparisons, and tabbed sections. It can also help landing-page designers keep long pages organized without removing useful information.
Create Cleaner, More Focused Pages
Long pages can overwhelm visitors when too much information appears at once. With show-and-hide controls, you can keep secondary details out of the way until someone wants to explore them.
For example, display a short product introduction with a button that reveals specifications, or show a service summary before expanding the full description. This approach helps organize content while allowing visitors to control their browsing experience.
Build Custom Tabs Without a Separate Tab Layout
The module can also be used to create tab-style interfaces. Add a button for each content area, configure the relevant elements to appear or disappear, and group the buttons where appropriate.
This gives you flexibility when designing custom content navigation for services, features, portfolios, or product information. The exact layout depends on how you configure the target elements and button actions.
Add Interactivity Without Rebuilding Your Design
You can target existing Divi sections, rows, and modules rather than recreating your page structure. Once the relevant CSS IDs or classes are configured, the button controls their visibility according to your settings.
This makes the module useful for enhancing an existing Divi layout with additional interactions while keeping most of your original design intact.
Important Compatibility Information
The Divi Show / Hide Button Module is an extension for the Divi Builder, not a standalone page builder. You need a compatible Divi installation to use it.
The developer lists compatibility with Divi 4 and Divi 5 through Divi 5’s backward-compatibility mode, with full Divi 5 support described as forthcoming on the product page. Test your installed version and any custom layouts on a staging website before using the module on a production site.
Divi Show / Hide Button Module – Make Your Divi Pages More Interactive
Give visitors more control over the content they see with the Divi Show / Hide Button Module. From expandable sections and content toggles to custom tab-style layouts, it helps you build flexible Divi pages with interactive controls and less need for custom-coded visibility behavior.
