Open first accordion item automatically

Beaver Builder
1

Hi, is it possible to have an accordion start with the first item opened automatically (as if the user clicked the first +)?

Cheers, Tom

2

Hi Tom,

Thanks for getting in touch! Unfortunately, we don’t have that option available on our Accordion Module yet, but what you can do is add this bit of code below in your functions.php. Go to Appearance > Editor > Theme Functions to access your theme’s functions.php

Take note that this code will alter all the accordion modules added to your site. If you want it applied on a specific page only then please provide us with the URL and we’ll update the code.


add_action('wp_head','hook_jQuery');

function hook_jQuery() {

	$output='
<script>
$( document ).ready(function() {
    jQuery( ".fl-accordion-item:first" ).addClass( "fl-accordion-item-active" );
    jQuery( ".fl-accordion-content:first" ).css( "display", "block" );
});
</script>
';
	echo $output;
}

wp_enqueue_script('jquerylib', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Alternatively, if you want more options, you can use a third-party plugin. BB will let you add elements from a third-party plugin via a shortcode in an HTML module.

Jun

3

Hi Tom,

Jus want to follow up on this. I read my response again and found that the code had a missing parenthesis at the end so this might give you some issues. So please try this one instead and see how it goes, this version is much cleaner as well.

function hook_jQuery() { ?>
<script>
(function($) {
  $(function() {
    $( '.fl-accordion-item:first' ).addClass( 'fl-accordion-item-active' );
    $( '.fl-accordion-content:first' ).css( 'display', 'block' );
    $( '.fl-accordion-item:first .fl-accordion-button-icon' ).removeClass( 'fa-plus' ).addClass( 'fa-minus' );
  })
})(jQuery)
</script> <?php }
add_action('wp_head','hook_jQuery');

Jun

4

Thanks Jun, that does the trick. If you ever want to upgrade the functionality, this option would be nice. It would also be great to be able to open an item by ID-name (instead of numbers like now). Referencing items by number creates problems if you change the order or ad items.

Thanks for your help. Jun.

Cheers, Tom

5

Hi Tom,

Thanks for the suggestion! Feel free to add that up as feature request on our User Voice!

https://wpbeaverbuilder.uservoice.com/forums/270594-general

Jun