How to Show / Hide a Section On Button Click in Elementor and WordPress

In this step‑by‑step tutorial, I’ll show you a simple way to show or hide any section, widget, image, or content block on your WordPress site when a button is clicked.

This method works with Elementor Free and Pro and can be adapted to Divi, WPBakery, Gutenberg, or any page builder that allows you to add CSS and JavaScript (including jQuery).

What You’ll Learn

How to add an ID to a button and classes to the target element in Elementor
How to hide an element with CSS and reveal it with jQuery
Two useful jQuery variations: reveal-and-hide-button and toggle, while keeping the button visible
Where to safely add the custom code in WordPress (Elementor Custom Code or equivalent)

What You Need Before Starting

An Elementor page with a button and a section/widget/image you want to toggle
Access to the element Advanced tab (to set an ID/class)
A place to paste small custom CSS and a jQuery snippet (Elementor → Custom Code, theme customizer, or a code snippets plugin)

Step‑By‑Step: Show / Hide a Section on Button Click

1. Create The Structure

Add a button and the element you want to reveal (for example, an image or a section). Layout the page as you usually would in Elementor.

2. Give The Button an ID

Select the button, open the Advanced tab, and set an ID (for example: showImage or show-section). Remember the exact name because the jQuery will target it.

3. Give The Target Element Classes

Select the element to be hidden initially and add two classes in the Advanced tab. Example classes I use:

ShowOnClick — used to identify which elements should be manipulated
is-hidden — used by CSS to hide the element initially

4. Add the CSS to Hide the Element Initially

Paste this CSS where you add custom CSS (Elementor custom CSS for the section, theme customizer, or a global stylesheet):

.is-hidden { display: none; }

After you save, the target element will be hidden on page load.

5. Add the jQuery (Custom Code).

Open Elementor → Custom Code (or your preferred method for adding JS) and paste a jQuery snippet. Here are two variations you can use. Adjust the selector to match your button ID and target class.

Variation A — Reveal the element and hide the button after click:

jQuery(document).ready(function($){
  $('#show-image').on('click', function(e){
    e.preventDefault();
    $('.show-on-click').removeClass('is-hidden');
    $(this).hide();
  });
});

Variation B — Toggle the element (click to show/hide) while keeping the button visible:

jQuery(document).ready(function($){
  $('#show-image').on('click', function(e){
    e.preventDefault();
    $('.show-on-click').toggleClass('is-hidden');
  });
});

Save the custom code, clear caches if necessary, and refresh the page to test.

How The Two jQuery Lines Differ (Quick Explanation)

removeClass(‘is-hidden’) — removes the hiding class and reveals the element permanently (until the class is re-added programmatically).
toggleClass(‘is-hidden’) — toggles the hidden state: click once to show, click again to hide.
$(this).hide() — hides the button that was clicked (useful when you want a one‑time reveal).

Useful Variations and Enhancements

Use slide or fade effects instead of simple class toggles, such as $(‘.show-on-click’).slideToggle() or $(‘.show-on-click’).fadeToggle(), for a smoother user experience.
Target multiple elements by using the same class on several widgets/sections.
Use data attributes for more advanced logic (example: data-target=” #id-of-section”).
Place the JS in the footer or use Elementor’s Custom Code with the position set to Footer to ensure jQuery is available.

Troubleshooting

If clicking does nothing: check the button ID and class names for typos and ensure you used the same selectors in the jQuery.
Make sure jQuery is loaded on the page. Most WordPress themes include it, but if not, use a proper enqueue method or add the script where jQuery is available.
If the change works in the editor but not on the live site, clear caching and minification plugins, or place the code after minification settings.
When using Elementor Pro’s dynamic or global widgets, verify the classes/IDs are applied on the rendered page (browser dev tools → Elements).

FAQ

Can I use this with Gutenberg, Divi, or WPBakery?

Yes. The approach remains the same: add an ID to the button, apply classes to the target, hide it with CSS, and insert the jQuery snippet using your theme’s customizer, a code snippets plugin, or the page builder’s custom code feature.

Do I need Elementor Pro to do this?

No. This works with Elementor Free as long as you can edit the element’s Advanced tab to add IDs/classes and have a way to add CSS/JS to the site.

How do I make the show/hide animation smooth?

Use jQuery slide/fade functions: replace the class toggle with $(‘.show-on-click’).slideToggle() or fadeToggle() for built‑in animation.

Where should I add the custom code so it’s safe and won’t break the site?

Elementor → Custom Code is a safe place. Alternatively, use a reputable code snippets plugin or your child theme’s enqueue method to add JS and CSS.

Conclusion

This is a quick and flexible way to toggle visibility of sections, images, pricing tables, FAQs, or call-to-action blocks with a single button click.

You can expand this idea to multiple buttons, toggle groups, or animated reveals for a more pleasant user experience.

If you need help implementing a specific interaction or require a custom jQuery solution, please reach out to fixingwp.com — I’m happy to help.

Ido Mosko

Ido is the content manager here at FixingWP. He is a WordPress enthusiast with extensive experience with plugin and theme customization, SEO, and marketing. My biggest hobbies are snowboarding, playing poker, and watching soccer.