Toggle button for showing and hiding a row

Customization Snippets
,
1

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);
  1. Add the following CSS code to the Layout CSS & Javascript > CSS pane:
body:not(.fl-builder-edit) .toggle-section {
display: none;
}
  1. Publish and test the button to make sure that it works.
2 Likes
2

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

3

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();

    });

});
4

This is great, but does anyone know the best way to add a slide down/up animation to this?

5

Change the jQuery animation fadeToggle(); for Another one like slideToggle(); maybe.
https://api.jquery.com/slidetoggle/

Or CSS animation.

Some tests here:

6

Thanks @avanti.

Sorry, I think I commented under the wrong post. I added what @Mars shared and I know there is both a JS and CSS way to add animation. My problem is I have not been able to do it right.

SlideDown works, but I am stuck on making a Slideup effect work when hiding the section again.

7

Ah sorry, i misunderstood. :wink:

8

Hi,

“Buttons links: leave empty” → its a mandatory field → What can i add there then?

thx :wink:

9

The js doesn’t seem to be working anymore with the latest version of BB. Plus it’s breaking the UI when trying to click over to the JavaScript pane. (had to activate safemode in order to go back to the tab and remove it)

Try this instead:

jQuery( ".toggle-button" ).click(function() {
  jQuery( ".toggle-section" ).slideToggle( "slow", function() {
  });
});
11

Hi
I found this thread as I am trying to show/hide multiple rows with different buttons on the same page, similar to MattS’ question.

The suggestion of Tabs or accordion does not work with the layout.

The design has 8 sections made up of one row with a button and the hidden row below it.

Is there a way to have one jQuery/CSS script that can apply to all the buttons or do I need to have separate scripts for each button? I saw one solution using jQuery(this).next() but it didn’t work for me. I am not a developer, so I may have been doing it wrong.

Any help would be greatly appreciated. Thanks!

12

To follow up, I used individual IDs and classes.

Thanks

13

Hello! I can’t get this to work for a main menu. Would that be different?
I’m trying to create a menu like the one at this website when you click on “books”:

The menu link reveals the hidden row.
But you can’t enter a link: JavaScript:void(0);
for a menu item.

14

Hi Chris,
I have used your script for toggling a row. Works fine … thanks. But what about columns? Please have a look to this post

and click on the shop icon. This opens the toggled section for a moment, but then it disappears and the whole page seems to be reloaded. Any idea how to fix that issue?

Thanks for your support
Ralf

15

You forgot the preventDefault and also you are clicking an href link so the element is different

jQuery( '.toggle-button a' ).on( 'click', function( e ) {
        e.preventDefault();
        jQuery( '.slide-section' ).slideToggle();
});
16

Yes, Before I was adding javascript:void(0) to the href link, but that is no longer an accepted method, so I just add a # and then add e.preventDefault(); to the JS as Pross mentioned.

17

To make WP allow the void as a link you have to disable a WP security feature Chris, second snippet here: Javascript and relative links in urls

18

Thanks a lot. My Query works fine now and I’m lucky.

Cheers