Toggle button for showing and hiding a row

I created a similar effect for Elementor, but had issues doing the same for BB. wpbeaverworld was kind enough to show me how to do the same thing on BB. Here are the code snippets for implementing this custom functionality.

  1. Add a row and configure its settings as follows:
    ID: [Enter ID to identify the row]
    Class: toggle-section
    Note: The name of the class can be something else.

  2. Add a button above the row and configure its settings as follows:
    Text: [Enter Name of Button]
    Link: JavaScript:void(0);
    Class: toggle-button
    Note: The name of the class can be something else.

  3. Add the following JavaScript code to the Layout CSS & Javascript > JavaScript pane:
    (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);

  4. Add the following CSS code to the Layout CSS & Javascript > CSS pane:
    body:not(.fl-builder-edit) .toggle-section {
    display: none;
    }

  5. Publish and test the button to make sure that it works.

1 Like