Tips for maintaining the state of my jQuery accordion menu on my website even after refreshing the page

Question

Tips for maintaining the state of my jQuery accordion menu on my website even after refreshing the page

I came across a nested JQuery accordion code that works perfectly, but there's a major issue. When I click on a menu or submenu in my sidebar (a link that redirects to a different URL), the site fails to remember which menu or submenu should be shown or hidden after a refresh (the default state is hiding all except the 1st level ul). Is there any way to make my menu remember its last state before a refresh? Thank you for your assistance.

HTML:

<ul>
    <li>
        <a href="foo1.php">level 2</a>
        <ul>
            <li><a href="foo2.php">a</a></li>
            <li><a href="foo3.php">b</a></li>
        </ul>
    </li>
    <li>
        <a href="foo4.php">level 2</a></li>
        <ul>
            <li>
                <a href="foo5.php">level 3</a>
                <ul>
                    <li><a href="foo6.php">c</a></li>
                    <li><a href="foo7.php">d</a></li>
                </ul>
            </li>

            <li><a href="foo8.php">e</a></li>
            <li><a href="foo9.php">f</a></li>
        </ul>
    </li>
</ul>

Jquery:

$('ul li ul').hide();
$('ul li').click(function(ev) {
  $(this).find('>ul').slideToggle();
  ev.stopPropagation();
});

Real HTML:

<ul class="arrows_list1-1">
   <h3>Naše produkty</h3>
   <div class="menu-produkty-container">
      <ul id="menu-produkty" class="menu">
      [Content has been truncated here for brevity]
      </ul>
   </div>
</ul>

Real Jquery:

$('.arrows_list1-1 li ul').hide();
    $('.arrows_list1-1 li').click(function(ev) {
        $(this).find('>ul').slideToggle();
        ev.stopPropagation();
    });

javascript jquery html css ajax

Answer 1

Answer №1

Our system will analyze the current URL and perform the following actions:

Expand the corresponding level of the current URL
Show all parent elements with class .sub-menu
Show sibling elements with class .sub-menu

Implementation Code:

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

var url = window.location.href;
var $current = $('.arrows_list1-1 li a[href="' + url + '"]');
$current.parents('.sub-menu').slideToggle();
$current.next('.sub-menu').slideToggle();

Answer 2

Our system will analyze the current URL and perform the following actions:

Expand the corresponding level of the current URL
Show all parent elements with class .sub-menu
Show sibling elements with class .sub-menu

Implementation Code:

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

var url = window.location.href;
var $current = $('.arrows_list1-1 li a[href="' + url + '"]');
$current.parents('.sub-menu').slideToggle();
$current.next('.sub-menu').slideToggle();

Answer 3

Answer №2

Save the latest tab in a session variable. For more information, check out the resources on MSDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Answer 4

Save the latest tab in a session variable. For more information, check out the resources on MSDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Answer 5

Answer №3

To start, assign a unique class name to each level of your accordion as illustrated below. Additionally, ensure that the onclick event for each level of the accordion is configured to set a cookie indicating the clicked element for tracking purposes.

<ul class="accordion">
  <li>
    <a href="foo1.php" class="lvl1" onClick="setcookie(this)">level 1</a>
    <ul>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo2.php">a</a></li>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo3.php">b</a></li>
    </ul>
  </li>
  <li>
  <a href="foo4.php" class="lvl2" onClick="setcookie(this)">level 2</a>
    <ul>
      <li class="lvl2">
        <a href="foo5.php" class="lvl2" onClick="setcookie(this)">level 3</a>
        <ul>
            <li class="lvl3"><a href="foo6.php">c</a></li>
            <li><a href="foo7.php">d</a></li>
        </ul>
      </li>

      <li><a href="foo8.php">e</a></li>
      <li><a href="foo9.php">f</a></li>
    </ul>
  </li>
</ul>
function setCookie(e) {
  document.cookie="activeAccordion=" + $(e).attr('class');
}

Additionally, upon loading the page, retrieve the stored cookie value and display the active accordion based on the stored value.

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('.' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Answer 6

To start, assign a unique class name to each level of your accordion as illustrated below. Additionally, ensure that the onclick event for each level of the accordion is configured to set a cookie indicating the clicked element for tracking purposes.

<ul class="accordion">
  <li>
    <a href="foo1.php" class="lvl1" onClick="setcookie(this)">level 1</a>
    <ul>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo2.php">a</a></li>
      <li class="lvl1" onClick="setcookie(this)"><a href="foo3.php">b</a></li>
    </ul>
  </li>
  <li>
  <a href="foo4.php" class="lvl2" onClick="setcookie(this)">level 2</a>
    <ul>
      <li class="lvl2">
        <a href="foo5.php" class="lvl2" onClick="setcookie(this)">level 3</a>
        <ul>
            <li class="lvl3"><a href="foo6.php">c</a></li>
            <li><a href="foo7.php">d</a></li>
        </ul>
      </li>

      <li><a href="foo8.php">e</a></li>
      <li><a href="foo9.php">f</a></li>
    </ul>
  </li>
</ul>
function setCookie(e) {
  document.cookie="activeAccordion=" + $(e).attr('class');
}

Additionally, upon loading the page, retrieve the stored cookie value and display the active accordion based on the stored value.

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('.' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Answer 7

Answer №4

Implementing Cookies on Click Event

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    document.cookie="activeAccordion=" + $(ev).attr('id');
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

Upon page load, retrieve the stored cookie to display the correct level.

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('#' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Answer 8

Implementing Cookies on Click Event

$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
    document.cookie="activeAccordion=" + $(ev).attr('id');
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

Upon page load, retrieve the stored cookie to display the correct level.

$(function(){
  var activeAccordion = getCookie('activeAccordion');
  $('#' + activeAccordion).closest('ul').slideToggle();
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Answer 9

Answer №5

One effective method is to save the state of the accordion in a cookie whenever it deviates from its default setting, allowing you to retrieve and apply it when the page is refreshed.

Answer 10

One effective method is to save the state of the accordion in a cookie whenever it deviates from its default setting, allowing you to retrieve and apply it when the page is refreshed.

Tips for maintaining the state of my jQuery accordion menu on my website even after refreshing the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilizing database information to dynamically select Nightwatch.js tests for execution

Having trouble updating the Laravel Session variable?

Transforming Objects into an Array of Objects in Javascript

Sending an array input to PHP

Our list of divs all have the same classes, but I need to remove one that contains an element with a specific class

When the user interacts with the textbox in a gridview, I want to display a checkbox list below the textbox. This can happen either through clicking

How to retrieve the href ID in Node.js using app.js

Using PHP, let's display the next image

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

retrieve the image name of the background using jQuery

What is the best way to generate an object using the elements of an array as keys?

When attempting to load a page in Mozilla, the initial DIV code fails to load

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Styling material-ui textfield: Tips and tricks

Exploring the features of AngularJS, one can delve into the ControllerAs syntax

I am encountering an issue where my Vue navbar is successfully changing the route but not updating the corresponding router-view

Clear all CSS styles applied to a targeted division

A guide on how to cycle through and modify key-value pairs using a Patch Request in MongoDB

implementing a feature to save and showcase a list of preferred names using jquery/ajax without the

Performing three consecutive Ajax requests in a Rails application