Menus expand on load but does not collapse

Resolved webuser1
(@webuser1)

2 months, 2 weeks ago

Hi,

We have set up the widget correctly as well as the styles.

However, the arrows only collapses on when the page loads. We wanted the menus to expand when user loads the sidebar menus.

To fix that, we came up with the following css.

.page-id-2110 .advanced_sidebar_menu-28-wrap ul.child-pages,
.page-id-2110 .advanced_sidebar_menu-28-wrap ul.grandchild-pages,
.page-id-2110 .advanced_sidebar_menu-28-wrap .children {
display: block !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
.page-id-2110 .advanced_sidebar_menu-28-wrap .advanced-sidebar-menu-accordion-trigger {
display: block !important;
visibility: visible !important;
}
.page-id-2110 .advanced_sidebar_menu-28-wrap .advanced-sidebar-menu-accordion-trigger .dashicons {
transform: translateY(-50%) rotate(180deg) !important;
}
.page-id-2110 .advanced_sidebar_menu-28-wrap .advanced-sidebar-menu-accordion-trigger {
pointer-events: none !important;
cursor: default !important;
}

The issue is now, when we click the arrow to collapse any menu, the menu does not collapse.

Any ideas how to fix this?

Viewing 1 replies (of 1 total)

Plugin Contributor

OnPoint Plugins

(@onpointplugins)

2 months, 2 weeks ago

Hi Webuser1,

This may be accomplished with a little custom JavaScript.

( function ( $ ) {
	$( document ).on( 'advanced-sidebar-menu-pro/accordions/loaded', function () {
		$( '.advanced-sidebar-icon-close' ).trigger( 'click' );
	} );
} )( jQuery );

Using Option 4 from the linked documentation

add_action( 'wp_print_footer_scripts', function() {
	?>
	<script>
		( function ( $ ) {
			$( document ).on( 'advanced-sidebar-menu-pro/accordions/loaded', function () {
				$( '.advanced-sidebar-icon-close' ).trigger( 'click' );
			} );
		} )( jQuery );
	</script>
	<?php
}, 1 );

Have a great day!

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.