ACCORDION, av-accordion-tab-sort-filter: show content immediately

If only one toggle matches the filter the user has clicked, one might want to show the content immediately (makes sense from UX perspective, since the user would open the toggle anyway as his next step; so we are polite and take care already 😉).

To make the Enfold accordion behave like that, you’ll have to change a JS event handler located in your Enfold theme directory in config-templatebuilder/avia-shortcodes/toggles/toggles.js as follows:

			sortLinks.on( 'click', function(e)
			{
				e.preventDefault();

				var show = toggles.filter('[data-tags~="'+$(this).data('tag')+'"]'),
					hide = toggles.not('[data-tags~="'+$(this).data('tag')+'"]');

				sortLinks.removeClass('activeFilter');
				$(this).addClass('activeFilter');

				show.slideDown();
				hide.slideUp();
				
				// Exactly 1 toggle to show and content is hidden?
				if( show.length == 1 && show.find('.toggle_wrap').css('visibility') == 'hidden' )
				{
					// Open specific toggle
					show.find('.toggler').trigger('click');
				}
				else if(show.length != 1) {
					// Close open toggles
					heading.filter('.activeTitle').trigger('click');
				}
			});

Best way to do so (instead of changing the original enfold file):

• Copy the original file into your child theme folder (I always recreate the Enfold folder structure to be able to trace the origin of the changed file).
• Open the copied file and replace the event handler by the one shown above.
• Save and close the file

To load your JS file instead of the original one, you have to add some code in your functions.php (taken and adapted from the very bottom of this page):

/**
 *  Load child theme toggles js 
 */
function itcv_change_togglesjs() {
   wp_dequeue_script( 'avia-module-toggles' );
   wp_enqueue_script( 'avia-module-toggles-child', get_stylesheet_directory_uri().'/config-templatebuilder/avia-shortcodes/toggles/toggles.js', array( 'avia-shortcodes' ), $ver, true );
}
add_action( 'wp_print_scripts', 'itcv_change_togglesjs', 100 );

Done!

• This topic was modified 1 year ago by JVo.
• This topic was modified 1 year ago by JVo.