Running a script in response to onclick()

Beaver Builder
1

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.

2

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

3

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;

4

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

row-classname
row-classname410Ă—536 19.4 KB
button-custom-classname
button-custom-classname403Ă—533 17.9 KB
button-settings-1
button-settings-1413Ă—538 21.6 KB
code-2
code-2582Ă—515 32 KB
code-1
code-1440Ă—538 16.6 KB

1 Like
5

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

1 Like
6

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

Thanks for sharing :slight_smile:

1 Like
8

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
9

Hi,

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

  • Michael
10

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
11

The issue on mobile is that it was causing a super quick “double clicking” effect, and the solution is to “return false” to stop things from re-running.

Here’s the code that’s working for us:

(function() {
jQuery(document).on('click touchend', '.contact-us-form-open-button', function(e) {
    var $contact_form_block = jQuery('#contact-form-magic');
    if ($contact_form_block.is(':hidden') ) {
        $contact_form_block.show();
    } else {
        $contact_form_block.hide();
    }
    **return false;**
});
})(jQuery);

Hope this helps anyone who is trying to do this and experiencing the mobile issue! :slight_smile: