# Toggle button for showing and hiding a row

**URL:** <https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770>\
**Category:** Snippets\
**Tags:** css, beaver-builder\
**Created:** [September 11, 2019, 8:50pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770 "2019-09-11T20:50:05Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mars](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/mars/32/1501_2.png) [@Mars](https://community.wpbeaverbuilder.com/u/Mars)\
**Post date:** [September 11, 2019, 8:50pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/1 "2019-09-11T20:50:05Z")

</div>

I created a similar effect for Elementor, but had issues doing the same for BB. [wpbeaverworld](https://community.wpbeaverbuilder.com/u/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:

```auto
(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:

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

```

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

---

<div class="post-metadata">

**Author:** ![MattS](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/matts/32/1699_2.png) [@MattS](https://community.wpbeaverbuilder.com/u/MattS)\
**Post date:** [November 4, 2019, 3:19am UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/2 "2019-11-04T03:19:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![avanti](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/avanti/32/930_2.png) [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Post date:** [November 4, 2019, 1:24pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/3 "2019-11-04T13:24:08Z")

</div>

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](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:

```auto
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:

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

    });

});

```

---

<div class="post-metadata">

**Author:** ![waumsley](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/waumsley/32/987_2.png) [@waumsley](https://community.wpbeaverbuilder.com/u/waumsley)\
**Post date:** [July 19, 2020, 7:07am UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/4 "2020-07-19T07:07:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![avanti](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/avanti/32/930_2.png) [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Post date:** [July 19, 2020, 11:56am UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/5 "2020-07-19T11:56:54Z")

</div>

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

Or CSS animation.

Some tests here:

> **[Custom Tabs module - Avanti : démo Beaver Builder](https://wpdemo4.avanti.fr/fr/tests/custom-tabs-module/)**
>
> Tabs module with custom styles and smooth transition This is a Beaver Builder Tabs module customized with CSS. Tab 1 Tab 2 Tab 3 Tab 1 The content #1 int arum renectibea ne neceatiis re pliquis mod minumqui rerchillab ipsapeliquo volecte ceatinus,...

> **[Custom columns - Avanti : démo Beaver Builder](https://wpdemo4.avanti.fr/fr/tests/custom-columns/)**
>
> Align buttons to columns bottom Column #1 Optatur aut lam ea quaepellores ad que non evellaciume cor molo comni atemodit recuptas non cum reperio offic to erit occus eost eos dem ere vid que se dio. Pudis perchit atusdae nobit, quodiae alicatquas et...

---

<div class="post-metadata">

**Author:** ![waumsley](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/waumsley/32/987_2.png) [@waumsley](https://community.wpbeaverbuilder.com/u/waumsley)\
**Post date:** [July 19, 2020, 5:58pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/6 "2020-07-19T17:58:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![avanti](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/avanti/32/930_2.png) [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Post date:** [July 19, 2020, 9:28pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/7 "2020-07-19T21:28:04Z")

</div>

Ah sorry, i misunderstood. 😉

---

<div class="post-metadata">

**Author:** ![BenjaminGo](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/7ea924/32.png) [@BenjaminGo](https://community.wpbeaverbuilder.com/u/BenjaminGo)\
**Post date:** [May 24, 2021, 5:35pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/8 "2021-05-24T17:35:12Z")

</div>

Hi,

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

thx 😉

---

<div class="post-metadata">

**Author:** ![MrFent](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/mrfent/32/897_2.png) [@MrFent](https://community.wpbeaverbuilder.com/u/MrFent)\
**Post date:** [February 2, 2022, 4:03pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/9 "2022-02-02T16:03:22Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![GilT](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/g/8dc957/32.png) [@GilT](https://community.wpbeaverbuilder.com/u/GilT)\
**Post date:** [July 14, 2022, 5:54am UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/11 "2022-07-14T05:54:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![GilT](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/g/8dc957/32.png) [@GilT](https://community.wpbeaverbuilder.com/u/GilT)\
**Post date:** [August 10, 2022, 9:07pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/12 "2022-08-10T21:07:26Z")

</div>

To follow up, I used individual IDs and classes.

Thanks

---

<div class="post-metadata">

**Author:** ![defreeze](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/d/35a633/32.png) [@defreeze](https://community.wpbeaverbuilder.com/u/defreeze)\
**Post date:** [April 3, 2024, 8:28pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/13 "2024-04-03T20:28:34Z")

</div>

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”:

> **[Mark Dawson: Author of the John Milton series.](https://markjdawson.com/)**
>
> Mark Dawson: the best-selling author of the John Milton, Beatrix Rose and Soho Noir series.

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

---

<div class="post-metadata">

**Author:** ![fotogenes](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/ee59a6/32.png) [@fotogenes](https://community.wpbeaverbuilder.com/u/fotogenes)\
**Post date:** [January 2, 2025, 3:40pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/14 "2025-01-02T15:40:52Z")

</div>

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

> **[New post | fotogenes.de by Fotograf Ralf Klinger](https://fotogenes.de/new-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

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [January 2, 2025, 3:57pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/15 "2025-01-02T15:57:36Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![MrFent](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/mrfent/32/897_2.png) [@MrFent](https://community.wpbeaverbuilder.com/u/MrFent)\
**Post date:** [January 2, 2025, 5:04pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/16 "2025-01-02T17:04:09Z")

</div>

> [@pross](#):
>
> `e.preventDefault();`

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.

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [January 2, 2025, 5:16pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/17 "2025-01-02T17:16:14Z")

</div>

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](https://community.wpbeaverbuilder.com/t/javascript-and-relative-links-in-urls/18270)

---

<div class="post-metadata">

**Author:** ![fotogenes](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/f/ee59a6/32.png) [@fotogenes](https://community.wpbeaverbuilder.com/u/fotogenes)\
**Post date:** [January 2, 2025, 7:59pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770/18 "2025-01-02T19:59:22Z")

</div>

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

Cheers