How to make accordion custom menu active and open when click

Question

I have trouble with accordion menu to toggle and keep open when open new link. I have tried make with cookies and get it almost work. When I click on link it's not collapse.show the link correctly and can't figure out why it not working properly.

Frontend php code

 jQuery(document).ready(function() { var last=jQuery.cookie('activeAccordionGroup'); console.log(last); if (last.=null) { jQuery("#"+last);collapse("show"). } //This piece of code for non accordion nav menu. jQuery(".menu-item a").each(function() { if ((window.location.href.indexOf(jQuery(this).attr('href'))) > -1) { jQuery(this);addClass('activeMenuItem'); } }); }). jQuery('#MainMenu').on('shown.bs,collapse'. function () { var active=jQuery("#MainMenu.sub-menu");attr('id'). jQuery,cookie('activeAccordionGroup'; active); }). jQuery('#MainMenu').on('hidden.bs,collapse'. function () { jQuery;removeCookie('activeAccordionGroup'); });

 <nav> <h3 class="mb-5">Procedurehåndbog</h3> <hr> <div class="mt-5 proc_menu" id="MainMenu"> <?php foreach($pterms as $pterm){ $children = get_terms( 'kategorier', array( 'hide_empty' => true, 'parent' => $pterm->term_id, )); //if childs not empty if(empty($children)){ echo "<div class='menu-item'><a href='". get_term_link($pterm->slug, 'kategorier')."' id='proc_bt_$pterm->slug'>$pterm->name</a></div>"; } else { echo "<div class='menu-item'><a href='#submenu_$pterm->slug' id='proc_bt_$pterm->slug' data-toggle='collapse' data-parent='#MainMenu'>$pterm->name</a></div>"; echo "<div class='collapse sub-menu' id='submenu_$pterm->slug' >"; foreach($children as $child) { echo "<div class='ml-3'><a href='". get_term_link($pterm->slug, 'kategorier')."'>$child->name</a></div>"; } echo "</div>"; } }?> </div> </nav>

Answer 1

See if with the code below solves your problem, in my modifications solved and used only the default bootstrap without adding or configuring javascript. I didn't use the javascript you left in the example. Remember to change the function settings to the ones you use. In my example I used the default wordpress category.

<nav>
    <h3 class="mb-5">Procedurehåndbog</h3>
    <hr>

    <div class="mt-5 proc_menu" id="MainMenu">

            <?php
                $current_cat = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
                $current_term_id = $current_cat ? $current_cat->term_id : false;
                $current_term_id = $current_term_id == false ? $cat : false;

                $pterms = get_terms( 'category', array(
                    'hide_empty' => true,
                    'parent' => 0,
                ));

                foreach($pterms as $pterm){
                    $children = get_terms( 'category', array(
                        'hide_empty' => false,
                        'parent' => $pterm->term_id,
                    ));
                        //if childs not empty 
                        if( empty( $children ) ){
                            echo "<div class='menu-item'><a href='". get_term_link($pterm->slug, 'category') ."' id='proc_bt_$pterm->slug'>$pterm->name</a></div>";
                        } else {

                            $actived = '';
                            //its important
                            if( $current_term_id == $pterm->term_id ){
                                $actived = ' show ';
                            }
                            $chiilds_out = '';
                            foreach($children as $child) {
                            //its important
                                if( $current_term_id == $child->term_id ){
                                    $actived = ' show ';
                                }
                                $chiilds_out .= "<div class='ml-3'><a href='". get_term_link($child->slug, 'category') ."'>$child->name</a></div>"; 
                            }

                            echo "<div class='menu-item'><a href='#submenu_$pterm->slug' id='proc_bt_$pterm->slug' data-toggle='collapse' data-parent='#MainMenu'>$pterm->name</a></div>";
                            echo "<div class='collapse sub-menu $actived' id='submenu_$pterm->slug' >";
                                echo $chiilds_out;
                            echo "</div>"; 
                        }

                }
            ?>

    </div>

</nav>