3

I found code for nested Jquery accordion and works like a charm, but i found one big problem, when i click menu or submenu in my sidebar (link that redirect to different url) then site doesn't remember which menu or submenu should be shown or hide after refresh (default state is hide all except 1level ul). Is there any option how to make my menu remember last state before refresh ? Thank you very much for your help.

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">
         <li id="menu-item-97" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-97">
            <a href="http://www.odsavacky.cz/wpccategories/akce/">Akce</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-114">
                  <a href="http://www.odsavacky.cz/wpccategories/akcni-ceny/">Akční ceny</a>
               </li>
               <li id="menu-item-98" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-98">
                  <a href="http://www.odsavacky.cz/wpccategories/novinky/">Novinky</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-63" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-wpccategories-ancestor current-menu-ancestor current-menu-parent current-wpccategories-parent menu-item-has-children menu-item-63">
            <a href="http://www.odsavacky.cz/wpccategories/spotrebni-material/">Spotřební materiál</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-66" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-66">
                  <a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie/">Kyslíková terapie</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-67">
                        <a href="http://www.odsavacky.cz/wpccategories/kyslikove-masky-a-nosni-sondy/">Kyslíkové masky a nosní sondy</a>
                     </li>
                     <li id="menu-item-176" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-176">
                        <a href="http://www.odsavacky.cz/wpccategories/masky-inhalacni/">Masky inhalační</a>
                     </li>
                     <li id="menu-item-68" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-68">
                        <a href="http://www.odsavacky.cz/wpccategories/mikronebulizatory/">Mikronebulizátory</a>
                     </li>
                     <li id="menu-item-179" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-179">
                        <a href="http://www.odsavacky.cz/wpccategories/prutokomery/">Průtokoměry</a>
                     </li>
                     <li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-180">
                        <a href="http://www.odsavacky.cz/wpccategories/redukcni-ventily/">Redukční ventily</a>
                     </li>
                     <li id="menu-item-178" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-178">
                        <a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-k-tep-nebulizatorum/">Příslušenství k tep. nebulizátorům</a>
                     </li>
                     <li id="menu-item-175" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-175">
                        <a href="http://www.odsavacky.cz/wpccategories/kyslikove-zvlhcovace-prislusenstvi/">Kyslíkové zvlhčovače, příslušenství</a>
                     </li>
                     <li id="menu-item-181" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-181">
                        <a href="http://www.odsavacky.cz/wpccategories/studene-nebulizatory-prislusenstvi/">Studené nebulizátory, příslušenství</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-73" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-73">
                  <a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace/">Resuscitace, intubace</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-189">
                        <a href="http://www.odsavacky.cz/wpccategories/laryngoskopy/">Laryngoskopy</a>
                     </li>
                     <li id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-188">
                        <a href="http://www.odsavacky.cz/wpccategories/laryngealni-masky/">Laryngeální masky</a>
                     </li>
                     <li id="menu-item-190" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-190">
                        <a href="http://www.odsavacky.cz/wpccategories/masky-resuscitacni/">Masky resuscitační</a>
                     </li>
                     <li id="menu-item-192" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-192">
                        <a href="http://www.odsavacky.cz/wpccategories/rucni-resuscitatory/">Ruční resuscitátory</a>
                     </li>
                     <li id="menu-item-191" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-191">
                        <a href="http://www.odsavacky.cz/wpccategories/prislusenstvi-defibrilace/">Příslušenství defibrilace</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-71">
                  <a href="http://www.odsavacky.cz/wpccategories/odsavani/">Odsávání</a>
                  <ul class="sub-menu" style="display: none;">
                     <li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-182">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-cevky/">Odsávací cévky</a>
                     </li>
                     <li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-183">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-hadice/">Odsávací hadice</a>
                     </li>
                     <li id="menu-item-184" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-184">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-lahve/">Odsávací lahve</a>
                     </li>
                     <li id="menu-item-185" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-185">
                        <a href="http://www.odsavacky.cz/wpccategories/odsavaci-vaky/">Odsávací vaky</a>
                     </li>
                     <li id="menu-item-186" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-186">
                        <a href="http://www.odsavacky.cz/wpccategories/saci-filtry/">Sací filtry</a>
                     </li>
                     <li id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-187">
                        <a href="http://www.odsavacky.cz/wpccategories/stopventily/">Stopventily</a>
                     </li>
                  </ul>
               </li>
               <li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-70">
                  <a href="http://www.odsavacky.cz/wpccategories/narkotizace-umela-plicni-ventilace/">Narkotizace, umělá plicní ventilace</a>
               </li>
               <li id="menu-item-64" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories current-menu-item menu-item-64">
                  <a href="http://www.odsavacky.cz/wpccategories/diagnostika/">Diagnostika</a>
               </li>
               <li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-65">
                  <a href="http://www.odsavacky.cz/wpccategories/ekg-prislusenstvi/">EKG – příslušenství</a>
               </li>
               <li id="menu-item-69" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-69">
                  <a href="http://www.odsavacky.cz/wpccategories/monitoring-defibrilace/">Monitoring, defibrilace</a>
               </li>
               <li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-72">
                  <a href="http://www.odsavacky.cz/wpccategories/operacni-svetla/">Operační světla</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-75" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-has-children menu-item-75">
            <a href="http://www.odsavacky.cz/wpccategories/zdravotnicke-pristroje/">Zdravotnické přístroje</a>
            <ul class="sub-menu" style="display: none;">
               <li id="menu-item-76" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-76">
                  <a href="http://www.odsavacky.cz/wpccategories/kyslikova-terapie-zdravotnicke-pristroje/">Kyslíková terapie</a>
               </li>
               <li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-77">
                  <a href="http://www.odsavacky.cz/wpccategories/resuscitace-intubace-zdravotnicke-pristroje/">Resuscitace, intubace</a>
               </li>
            </ul>
         </li>
         <li id="menu-item-74" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-74">
            <a href="http://www.odsavacky.cz/wpccategories/vyukovy-program/">Výukový program</a>
         </li>
         <li id="menu-item-62" class="menu-item menu-item-type-taxonomy menu-item-object-wpccategories menu-item-62">
            <a href="http://www.odsavacky.cz/wpccategories/nahradni-dily/">Náhradní díly</a>
         </li>
      </ul>
   </div>
</ul>

Real Jquery:

$('.arrows_list1-1 li ul').hide();
    $('.arrows_list1-1 li').click(function(ev) {
        $(this).find('>ul').slideToggle();
        ev.stopPropagation();
    });
1
  • An alternative to remember which submenu was open, is to check the window.location of the current page and search the corresponding anchor inside the ul. If that is your current HTML markup I could write some code. Could you post some real URL examples?
    – azeós
    Commented Jan 29, 2014 at 0:38

5 Answers 5

5

We'll check the current URL and open:

  • The corresponding level of the current URL
  • All the parents .sub-menu
  • His sibling .sub-menu

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();
3
  • 1
    If i have 4 more reputation points I'll give you thumb up for your answer. Nice and easy. Thank you for your effort and time.
    – Daemon481
    Commented Jan 29, 2014 at 2:13
  • This is nice and clean. Commented Jan 29, 2014 at 17:54
  • BTW, you already have style="display: none;" in the ULs. The first line where you hide them is unnecessary.
    – azeós
    Commented Jan 29, 2014 at 20:41
2

Store the last tab in a session variable. See the MSDN documentation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

1
  • Good evening, Is there a workaround with adding class for example active to menu or submenu and check if menu or submenu is active or empty after refresh ? If adding class to element is hard or impossible . Can you please tell me in words for people who never did something with store Jquery accordion state in session, cookie or both variables in javascript. How to use it or what add to session variable. Thank you very much.
    – Daemon481
    Commented Jan 29, 2014 at 1:07
2

First, give each level of your accordion a class name as shown below. Also, set the onclick of each level of your accordion to set a cookie of what was clicked so we can keep track of where we are in the accordion.

<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');
}

Next, on page load, read that cookie and set the active accordion to what we set in the cookie.

$(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 "";
}
1
  • Thank you for your answer, but I try method without Jquery UI accordion. Is there a workaround without Jquery UI accordion ? Reason is because my wordpress theme is in bad relationship with Jquery UI accordion. Don't answer on that question if it cost you much time.
    – Daemon481
    Commented Jan 29, 2014 at 1:41
1

Set a cookie on li click

$('.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();
});

on document ready, read that cookie and set 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 "";
}
0

You could store the accordion state in a cookie when it changes from the default, and then read it back on page refresh.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.