Running a script in response to onclick()

Hi,

I need to run a script to show/hide a div when a person clicks a button. The button that comes with BB does not have an onclick() option. Is there a workaround?

Many thanks.

You will implement the custom JS code. Then it can work perfectly.

Thank you for the quick response. I have the script, I am just trying to figure out how to run it when the button is clicked. In Elementor, the Premium Button widget has an onclick() field where I can enter the code. It works perfectly, but I am trying to do the same in BB.

var x = document.getElementById(“sources”);
if (x.style.display === “none”) {
x.style.display = “block”;
} else {
x.style.display = “none”;
}
return false;

Here is my steps

  1. Add a custom class name (toggle-section) to row
  2. Add custom class name (toggle-button) to button module
  3. Enter JavaScript: void(0); into link field of button module
  4. Add custom CSS/JS into the Layout CSS/JS script box

1 Like

Wow. Thank you for taking the time. Really appreciate it.
I’ll give it a try and report back.

1 Like

@wpbeaverworld I tried this and it works great! Could you add this to the Snippets thread?

https://community.wpbeaverbuilder.com/c/customization/snippets

Thanks for sharing :slight_smile:

1 Like

Was able to get it to work. The issue had to do with me using f1 instead of fl. Was also able to figure out the Row Settings issue.

For those who need the code to add to the Layout CSS / JavaScript section, here it’s:

Add the following to the CSS pane. This CSS code hides the section upon loading the page.

body:not(.fl-builder-edit) .toggle-section {
    display: none;
}

Add the following code to the JavaScript pane. The code shows or hides the section whose Class name is toggle-section.

(function() {
    jQuery('.toggle-button .fl-button').on('click', function(e){
        if ( jQuery('.toggle-section').is(':hidden') ) {
            jQuery('.toggle-section').css('display', 'block');
        } else {
            jQuery('.toggle-section').css('display', 'none');
        }
    });
})(jQuery);

Button configuration:
Text: [Enter Name of Button]
Class: toggle-button
Link: JavaScript:void(0);

Row Settings:
ID: [Enter ID to identify the row]
Class: toggle-section

1 Like

Hi,

Thanks for the wonderful solutions. Any idea why it doesn’t work on mobile?

  • Michael

Hi,

Have you tried this on mobile? It works nicely on desktop, but it doesn’t work on mobile. Any thoughts as to why?

Thanks,

  • Michael