Accordion Collapse for different accordions in one row

Beaver Builder
1

Hi Beaver-Team,
I am building 3-column-row and in each column i’m using one accordion. If one of these accordion is already opened, can I get it to collapse, when another is getting opened?
Best regards
Stathis

1 Like
2

Hi Stathis,

Thanks for contacting us! Unfortunately, there’s currently no option for the Accordion module to let us do this. There is a way we can do this through a jQuery code, I have constructed one for you, all you have to do is add this to your functions.php under Appearance > Editor > Theme Functions

add_action('wp_head','hook_jQuery');

function hook_jQuery() { 
$output='
<script>
(function($) {

  $(function() {
  $( ".fl-accordion-button" ).click(function(){
  $( ".fl-accordion-item.fl-accordion-item-active .fl-accordion-button-icon" ).not(this).removeClass( "fa-minus" ).addClass( "fa-plus" );
  $( ".fl-accordion-item" ).not(this).removeClass("fl-accordion-item-active");
  $( ".fl-accordion-content" ).not(this).hide( "slow" );
    
  })

})
})(jQuery)
</script>
';
echo $output;
}

Please add in a class under the row where you have the accordion module and add that in the jQuery selector since this code will pretty much affect all accordions in your entire site. Once you added the class, for instance, you added .accordion-row then just add it in all the selectors so it should look like this $( ".accordion-row .fl-accordion-button" )

3

Hi Jun,

that worked perfectly! Thanks!!!