[Plugin: Advanced Sidebar Menu] accordion menu

Hello dearjudy,

Are you looking to make the menu have an accordion effect using the currently functionality.
For instance adding only the parents of the current page and the current page to accordian.
Or are you looking to make an accordion of all the pages and child pages on your site?
Or are you looking to make an accordion of all the parents pages of the current page and other child pages or those pages?

Hello Mat, thank you for the swift response.
I am looking to make the menu have an accordion effect using the currently functionality.
I tried to combine your plugin with “Create Simplest Accordion Menu using jQuery” https://viralpatel.net/blogs/create-accordion-menu-jquery/.
I managed to make it work but not the way I wanted. I my case I only needed to hide and reveal (in a sliding manner) Grandchildren (I suppose…?). I don’t have a deep knowledge in php or programming therefor I need some help.
Here’s the link to the image: https://www.jeremyknibbs.co.uk/test.png
Thank you and I look forwrd to hearing from you.

Good Morning,
Please post the JQuery code you used to get it working(but not the way you wanted). I may be able to adjust it to affect only the grandchild level of pages.

Cheers

Good Morning!

I used

1. <script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’></script&gt;
2. the code below, in the “footer”

<script type="text/javascript">
				jQuery(document).ready(function($) {
					jQuery('#dc_jqaccordion_widget-3-item .menu').dcAccordion({
						eventType: 'click',
						hoverDelay: 0,
						menuClose: false,
						autoClose: true,
						saveState: false,
						autoExpand: true,
						classExpand: 'current-menu-item',
						classDisable: '',
						showCount: false,
						disableLink: true,
						cookie: 'dc_jqaccordion_widget-3',
						speed: 'normal'
					});
				});
			</script>

3. and the code below in a separate .js file:

$("div.left-nav ul li.start-open", $target).addClass("is-open");

  $("div.left-nav ul li:has(div.submenu) > a", $target).bind("click", function()
  {

    // See if they clicked the currently open one
    var isOpen = $(this).parent().hasClass("is-open");

    // Close current menu item
    var current = $("div.left-nav ul li.is-open");
    if (current.length > 0)
    {
      current.removeClass("is-open");
      current.children("a").removeClass("open");
      current.children("div.submenu").slideUp("normal");
    }

    // Open new menu item (unless they clicked to close)
    if (!isOpen)
    {
      var open = $(this).parent();
      open.addClass("is-open");
      open.children("a").addClass("open");
      open.children("div.submenu").slideDown("normal");
    }

    // Hide the outline
    $(this).blur();

    return false;

  });

4. with the .css file.

It looks terribly complicating for me! but I hope that you will be able to see the “grain” here ??

Thanks again.

I forgot to tell you that in one of your files “page_list.php” I added <div class=”left-nav”>

#-- list the parent page if chosen
if( $asm->include_parent() ){
	echo '<strong><div class="left-nav"></strong> <ul class="parent-sidebar-menu">';
			 wp_list_pages("sort_column=menu_order&title_li=&echo=1&depth=1&include=".$top_parent);
}

That’s all! Hope it will help.

Here is much simpler way of doing this

1. Add this to the functions.php file of your theme. It will allow you to use the built in jquery without adding it again in a <script> tag.

   `add_action( ‘wp_enqueue_scripts’, function (){
   wp_enqueue_script(
   ‘custom-asm-script’,
   get_bloginfo( ‘stylesheet_directory’ ) . ‘/custom-asm-script.js’,
   array(‘jquery’ ), //The scripts this depends on
   ‘1.0.0’ //The Version of your script
   );
   });`

2. Create a file in the themes folder named ‘custom-asm-script.js’ which matches the named file in step 1. This is where you can add any JQuery you require.
3. Add a little bit of JQuery to the new file

   jQuery(document).ready( function($) {
   
   	//Makes the grandchild menu show then the child menu is clicked
   	$(".child-sidebar-menu").click(function(){
   	    if(false == $(this).find('ul').is(':visible')) {
   	    	$(this).find('ul').slideUp(300);
   	    }
   	    $(this).find('ul').slideToggle(300);
   	});
   
   	//Initially hides the grandchild menu
   	$('.child-sidebar-menu ul').hide();
   
   }) ;

That’s it. It should now cause your grandchild menus to act like an accordion. The downside is, items in the menu are links so when they are clicked on, you leave the page which closes any open accordions.
If the user clicks around the link and not directly on it, this will work fine.

Otherwise if you want the menu to show on hover instead of click to prevent this, change the code in the new file to this

jQuery(document).ready( function($) {

	//Makes the grandchild menu show then the child menu is hovered
	$(".child-sidebar-menu").hover(function(){
	    if(false == $(this).find('ul').is(':visible')) {
	    	$(this).find('ul').slideUp(300);
	    }
	    $(this).find('ul').slideToggle(300);
	});

	//Initially hides the grandchild menu
	$('.child-sidebar-menu ul').hide();

}) ;

Looks like step one did not format correctly.
Here is another try

add_action( 'wp_enqueue_scripts', function (){
	wp_enqueue_script(
	    'custom-asm-script',
	    get_bloginfo( 'stylesheet_directory' ) . '/custom-asm-script.js',
	    array('jquery' ),  //The scripts this depends on
		'1.0.0'     //The Version of your script
	);
});

Let me know if this takes care of it.

Cheers

Hi Mat, unfortunately the new code in function.php gives an error
“Parse error: syntax error, unexpected T_FUNCTION in /websites/LinuxPackage05/……….functions.php on line 58”

Without the new code in function.php, the grandchild menu partially works but doesn’t want to stay open at all, behaves like a spring.
Thank you

I have adjusted the jquery to leave the menu open until you hover over it again.

jQuery(document).ready( function($) {
	//Makes the grandchild menu show then the child menu is hovered
	$(".child-sidebar-menu").hover(function(){
	     $(this).find('ul').slideToggle(300);
			}, function(){
					return;
		});
	//Initially hides the grandchild menu
	$('.child-sidebar-menu ul').hide();
});

Hopefully this helps.
Not sure why you are getting the ‘Parse error’. Maybe you are getting an extra character or less a character during the copy and paste. Feel free to email me a copy of the functions.php file for further diagnositics. You may have to zip or tar it up before you email it to get through the virus protection. [email protected]

Thanks, Mat, I’ll have a look at it tomorrow, it’s midnight here.

Hi Mat, it works pretty well now, thank you very much for your help. It’s very much appreciated.

I have two more questions to discuss, if you don’t mind.

1. Is it possible to keep the grandchild menu open when on the grandchild page? while when…
2. …. on the child or parent page, to keep the grandchild menu open after clicking on it once (or hover over it once)unless it clicked again to close?

Cheers

Good Morning,

Here is the adjusted Jquery to keep the granchild menu open when on a grandchild page.

jQuery(document).ready( function($) {
       //Makes the grandchild menu show then the child menu is hovered
       $(".child-sidebar-menu").hover(function(){
    	   //Opens and closes the granchild menu when not on a grandchild page
            $(this).find('ul').not( $('.child-sidebar-menu ul li.current_page_item').parent() ).slideToggle(300, function(){
               $('.child-sidebar-menu ul li.current_page_item').parent().show();
               $('.child-sidebar-menu ul li.current_page_item ul').show();
            });
                    }, function(){
                                 return;
             });
       //Initially hides the grandchild menu
       $('.child-sidebar-menu ul').hide();

       //Initially show the grandchild menu if on a grandchild page
       $('.child-sidebar-menu ul li.current_page_item').parent().show();
       $('.child-sidebar-menu ul li.current_page_item ul').show();
});

I hope this does the trick.
Using the menu in this way has inspired me to add a new feature to my next version of the plugin.

Have a great day!

For some reason the last adjustment visually hasn’t changed anything, hasn’t made any difference.
I use PC laptop and Windows 7.
Grandchild Menu is closed on the parent page and on the grandchild’s page, and opens if you hover over it or over any other children menus below; then it collapses back if you hover over it or over any children menus below.
Hope it helps.

Thank you!

Here’s a new update: I’ve just noticed that, in fact, the Jquery keeps the granchild menu open when on a grandchild page!
Can we keep it open on the on the child page as well, but to keep the grandchild menu closed on the parent’s page and open the grandchild menu after clicking on it once (or hover over it once)unless it clicked again to close?

Well done, thank you!