How to Show/Hide a Section Using a Button Click in Divi Theme for WordPress

As a designer/developer using the Divi theme in WordPress, you may be looking for a way to show and hide a section on your website using a button click. This tutorial will guide you step-by-step on how to achieve this functionality with ease. By following these instructions, you’ll be able to create an interactive website that engages your users and encourages them to explore your content.

Step 1: Create a new section in Divi Builder

First, open your page or post where you want to add the show/hide functionality using the Divi Builder. Click on the blue “+” button to add a new section. Select the type of section you want (e.g., Regular, Specialty, or Fullwidth) and create a new row inside the section with the desired number of columns.

Step 2: Add content to the section

Now, add the content you want to show or hide inside the section. You can use any Divi module that fits your needs, such as Text, Image, or Video modules.

Step 3: Assign a CSS ID to the section

In order to target the section with JavaScript, you need to assign a unique CSS ID to it. Click on the section settings (gear icon) and navigate to the “Advanced” tab. In the “CSS ID & Classes” section, add a CSS ID (e.g., “hidden-section”) and click “Save.”

Step 4: Add a button module

Next, add a button module to your page or post. This button will be used to show and hide the section. Customize the button’s text and appearance as desired.

Step 5: Assign an onclick event to the button

To make the button toggle the visibility of the section, you need to add an onclick event to it. Open the button settings (gear icon) and navigate to the “Advanced” tab. In the “Attributes” section, add the following code to the “onclick” field:

toggleSection('hidden-section');

Replace “hidden-section” with the CSS ID you assigned to the section in Step 3. Save the settings.

Step 6: Add custom JavaScript code

Now, you need to add custom JavaScript code to handle the button click event and toggle the section’s visibility. Navigate to Divi > Theme Options > Integration and locate the “Add code to the < head > of your blog” field. Add the following JavaScript code:

<script>
function toggleSection(sectionId) {
  var section = document.getElementById(sectionId);
  if (section.style.display === "none") {
    section.style.display = "block";
  } else {
    section.style.display = "none";
  }
}
document.addEventListener("DOMContentLoaded", function() {
  var hiddenSection = document.getElementById("hidden-section");
  hiddenSection.style.display = "none";
});
</script>

Replace “hidden-section” with the CSS ID you assigned to the section in Step 3. Save the settings.

Congratulations! You have successfully implemented a show/hide functionality for a section in your Divi theme using a button click. This interactive feature will enhance your users’ experience, allowing them to reveal or hide specific content on your website as they wish. As you become more familiar with Divi and JavaScript, you can further customize this functionality to fit your unique design needs. Happy building!