Keep Accordion Sub-menu Open on Page Change in Custom WordPress Theme

max mega menu
max mega menu documentation
wordpress mega menu
max mega menu demos
accordion menu wordpress without plugin
max mega menu - vertical
max mega menu themes
wp mega menu documentation

I have a client site that requires the side menu to act like an accordion with the sub-menu's dropping down after the parent is clicked and staying open while the parent or any of the sub-menu's is active. The menu is created in PHP with the content for the buttons taken from the service section.

The menu is part of the custom theme and has been inserted into several page templates. As is part of the theme I would like to avoid changing the template php code. (not sure how often the theme will be updated) I have tried css and jQuery but so far have only managed to keep the sub-menu open briefly after the onclick then disappears when page loads.

You can see the site at https://www.birchandco.com - There is a hover state at the moment so that visitors can navigate. This would be removed once is working properly with an onclick.

PHP Template:

<div class="home_services">
    <?php 
        $ser= new WP_Query(array(
            'post_type'=>'service',
            'posts_per_page' => -1, 
            'orderby' => 'name',
            'order' => 'ASC',                                   
            'meta_query' => array(
                array(
                    'key' => '_is_ns_featured_post',
                    'value' => 'yes',
                )
            )                                   
        ));

    ?>
    <ul class="service_list">
        <?php 
            if($ser->have_posts()) :
                while($ser->have_posts())  : $ser->the_post();
        ?>
        <li class="item">
            <a href="<?php the_permalink(); ?>"><?php the_title();?> <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
            <?php if(get_the_terms(get_the_ID() , 'service_category')[0]->term_id) {?>
                <ul class="submenu">
                    <?php
                        $args = array(
                            'post_type' =>'service',                                                    
                            'orderby' => 'name',
                            'order' => 'ASC',                                                                                       
                            'post__not_in' => array(get_the_ID()),
                            'tax_query' => array(
                                array(                      
                                    'taxonomy' => 'service_category',
                                    'field' => 'term_id',                                                       
                                    'terms' => get_the_terms(get_the_ID() , 'service_category')[0]->term_id
                                )
                            )
                        );
                        $query = new WP_Query( $args ); 
                        $loop = new WP_Query( $args );
                        if( $loop->have_posts() ): 
                            while ( $loop->have_posts() ) : $loop->the_post();
                        ?>
                        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                        <?php
                        endwhile; wp_reset_postdata();
                        endif;
                        ?>
                </ul>           
            <?php } ?>
        </li>
        <?php
        endwhile;
        wp_reset_postdata(); 
        endif;
        ?>
    </ul>

</div>

CSS

This is the CSS for the current hover state for the submenu

.home_services ul.service_list > li:hover ul.submenu{
display: block;
opacity:1;
visibility:visible;}

JQuery

This is the code that I managed to get to work but it only toggles the sub-menu. Once the onclick event has been executed and the page loads then the sub-menu disappears.

jQuery(document).ready(function($){
var body = $('body');
$('.home_services ul.service_list li a').on('click', 
function(event){
    event.preventDefault();
    // create accordion variables
    var accordion = $(this);
    var accordionContent = accordion.next('.home_services 
 ul.service_list > li ul.submenu');

    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);

});
});

Any help will be most appreciated.

I have seen a possible jquery solution but I am not sure how to apply the below code to my situation. If you can help it would be very much appreciated.

$('.home_services ul.service_list li a').click(function(e){
  ... 

  localStorage.setItem("activeSubMenu", $(this).text());
  });
  On page load, read the localStorage and expand the menu (if found):
  $(document).ready(function(){
var activeItem = localStorage.getItem("activeSubMenu");
if(activeItem){
    $('.home_services ul.service_list li a').filter(function() {
        return $(this).text() == activeItem;
    }).slideToggle();
 }
 });

I managed to work out a solution to keeping the sub-menus open on a page change. I removed the PHP code for the existing menu and replaced it with

`<?php //echo do_shortcode("[widget id=nav_menu-3]"); ?>` 

This [widget id=nav_menu-3] shortcode is created via a widget shortcode creator plugin. I used the WordPress menu system to structure the menu then accessed the menu via the navigation Menu widget and added it to the shortcode section so to create a shortcode for the widget. The above code lets you add shortcodes to a PHP template.

This then enabled me to add the WordPress menu to the custom page templates. The next step was to style the menu so it looks like the original menu then via CSS target the current menu item, parent and sub-menu so the sub-menu stays open when the page changes. See code below

`/*--- show or hide sub navs based on the parent menu item or the current menu item
----------------------------------------------- */

.widget_nav_menu ul li.current-menu-item ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-item ul.sub-menu li ul.sub-menu 
{display:none;}

.widget_nav_menu ul li.current-menu-parent ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li ul.sub-menu 
{display:none;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu {display:block;}

.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu li ul.sub-menu {display:none;}`

After that, I added a pseudo-element (double arrow) to the parent to indicate there are sub-menus.

`/*Sub-Menus Pseudo Element - Add to Customise Header
--------------------------------------------- */

ul#menu-services.menu li a:after {
    content: '»';
    font-size: 31px;
    float: right;
  transform: rotate(90deg); -- Turns arrows around so point downwards.
}`

Accordion Menu – Max Mega Menu, This article explains how to create a WordPress accordion menu and display it out the menu on the left of this page to see a live demo of the Accordion menu. To switch your menu from a horizontal (default) to a vertical accordion menu, Keep Active Sub Menus Open – this will automatically open sub menus when you� Not only that but also you can create accordion from any custom post type. Obviously, it is an important feature that there is the flexibility of creating accordion from the post, custom post type, and category. WooCommerce FAQ or Q&A Accordion Tab. If you are using WooCommerce in your WordPress website, Easy Accordion Pro offers a great


Not answer to your question. But try

<div class="container">
  <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Menu 0
        </a>
      </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Menu 1
        </a>
      </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Menu 2
        </a>
      </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>


    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Menu 3
        </a>
      </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

Accordion Menu: Making Parent Menu Item Clickable – Max Mega , Accordion Menu: Changing the click behaviour for parent items If you want to be able to click the parent item and go straight to that page (without first opening the sub menu): Go to Appearance > Custom JavaScript and paste in the following: the 'Accordion Behaviour' option is set to 'Keep active submenus open'. Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features. Adds a Gutenberg block for adding accordions to your site.


On page load, test to see if the URL includes one of the paths that your accordion links to. If so, open that accordion. Something like this:

(function($) {

  $(document).ready(function() {

    // Get the current path (for instance, "/service/contesting-a-will-2/")
    var pathName = window.location.pathname;

    // This is a bit complex, but we're concatenating the pathName variable
    // into your selector so we can find a match and toggle the "open" class
    $('.home_services ul.service_list li a[href*="' + pathName + '"]').toggleClass('open');
  });

})(jQuery);

Note that I haven't tested this, but the general idea is just to match the href attribute from the accordion to the pathname variable we made out of the URL and then open that accordion item. The addition of the [href*=... means "select all tags that contain" and we then pass in the path we got from window.location.pathname.

All things being equal, this should open the accordion as the page is finishing loading which basically achieves the goal of it "being open" on page load.

Mobile WordPress menu button reloads page = vicious cycle , Support � Theme: Sela � Mobile WordPress menu button reloads page Change <a class="navicon mtoggle" href=""> to <div class="navicon Here is the post I found on Stack Overflow: jQuery Mobile Drop Down Menu Causing Page Reload any way to prevent it from linking to this page, and to just open the menu like� Nextend Accordion Menu. The Nextend Accordion Menu plugin works by setting up menus via its settings page, and then choosing your menus through a widget. There are a number of options on the settings page, including controlling when the menu is opened (on click, on hover, etc.), which levels are open by default, animation type, and positioning.


Advanced Sidebar Menu – WordPress plugin, Only related items display so you don't have to worry about keeping a custom menu up to and change titles of navigation menu items using each page's settings! Accordion menu support for pages, categories, and navigation menus. Example of a category menu ordered by title using the 2017 theme and default styles� Auto open first level parent category or menu, settings available for enabling or disable. Feature for keep open selected menu items accordion. Feature for keep open current menu or category accordion. Custom icon picker both for menu & categories. FontAwesome and Themify icons included. Easy to use, lightweight and many more.


jQuery Accordion Menu Tutorial, For this accordion menu I will be using two fonts, Ubuntu and Open Sans. Instead, this approach allows you to change the color of this menu by simply This tells our custom jQuery code to run once the page is fully loaded. which provides free drop down menu code and a Wordpress Menu Plugin for� See our guide on how to choose the perfect WordPress theme for your website. Here are a few excellent themes that support the dropdown menu out of the box. Astra – It is a multipurpose WordPress theme that comes with several starter sites and tons of features. StudioPress themes – Built on top of genesis theme framework, these professional


Wordpress Accordion Menu Tutorial, Ability to edit your theme's functions.php file. Demo. Click on a menu item to expand its sub menus. Check out our other accordion menus menu� Go your plugin setting via WordPress Dashboard and find “ Accordions ” activate it. After activate plugin you will see “Accordions” menu at left side on WordPress dashboard click “New Accordions” and use the options field “Accordions Options”. How to use on page or post.