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

Is there a way to adapt this for multiple buttons/rows?

I have a case where i want to have 3 buttons, each one will display a different form when clicked (and obviously hide any other form showing in the process). I have been using this code and trying to modify it but with no success, as my skills in javascript are quite limited

Hi,

At most simpler, you could put your different forms each in a tab of a Tab module and use the buttons to open the proper tab:

• Add an ID to the Tabs module; e.g. my-tab
• Target the tabs with a link on the button like #my-tab-0, #my-tab-1

Or the JS way, which would require to add an attribute to the buttons to target the columns.
This little BB 3rd party plugin adds the attribute support to modules: https://github.com/JasonTheAdams/BBCustomAttributes

• [Updt] Columns class: toggle-section-1 (or 2, 3…)
• Buttons class: toggle-button
• Buttons attributes: target = toggle-section-1 (or 2, 3…)
• Buttons links: leave empty
• [Updt] Custom CSS to hide the columns on page load:

body:not(.fl-builder-edit) [class*="toggle-section-"] {
    display: none;
}

[Updt] Custom JS in BB Tools > Layout JS or Global Settings, to toggle columns visibility:

jQuery(document).ready(function($) {

    $(".toggle-button a").on("click",function(e){

        // Reset all columns visibility
        $("[class*='toggle-section-']").hide();
        
        // Get target from clicked button attribute
        var target = $(this).closest(".toggle-button").attr('target');

        // Toggle target visibility
        $('.' + target).fadeToggle();

        // Disable links
        e.preventDefault();

    });

});