Link to home
Start Free TrialLog in
Avatar of Tony Roman
Tony Roman

asked on

How to maintain the position of the current clicked tab while navigating to a new page using a vertical accordion menu

The website is using a vertical accordion menu which works great, but resets to its' initial position each time (if expanded) while going to a new page. This can be very annoying for a visitor who has to start browsing through a lot of sub-menus, to expand it back exactly where it was. There are a lot of pages/links nested in the menu and I am planning to add even more, so the accordion should stay open. It should close back up only when and if the visitor chooses to, but I'm not sure how to accomplish that, because I'm not very familiar with these scripts.
Please take a look at the scripts pasted below and let me know if you have any suggestions.
Thank you.

$(document).ready(function(){
                        $("#accordian a").click(function(){
                              var link = $(this);
                              var closest_ul = link.closest("ul");
                              var parallel_active_links = closest_ul.find(".active")
                              var closest_li = link.closest("li");
                              var link_status = closest_li.hasClass("active");
                              var count = 0;

                              closest_ul.find("ul").slideUp(function(){
                                    if(++count == closest_ul.find("ul").length)
                                          parallel_active_links.removeClass("active");
                              });

                              if(!link_status)
                              {
                                    closest_li.children("ul").slideDown();
                                    closest_li.addClass("active");
                              }
                        })
                  })

and

$(document).ready(function(){
      $("#accordian h3").click(function(){
            //slide up all the link lists
            $("#accordian ul ul").slideUp();
            //slide down the link list below the h3 clicked - only if its closed
            if(!$(this).next().is(":active"))
            {
                  $(this).next().slideDown();
            }
      })
})
SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tony Roman
Tony Roman

ASKER

Thank you very much. I honestly hope that I can do it. I'm not sure how it's done, but I'll try to figure it out.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
first set X as 1/2/3 etc and make it works...
then change that X based on your page...
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you so much. I'll try it.
different solutions are provided...