jQuery Vericle collapsible meny modification needed

Please see http://www.daretocompare.ca

First of all, apologies - I am fairly new at this. I am just starting on this site.

On the left you will see a menu bar that is using jQuery and is working as expected. However, I would like to make one change. When the page loads, the menus are collapsed. This is great - just what I want. However, when you click on a category, say Automotive, and then click on a sub-category, the menu collapses again. Is there a way to keep the sub menu open after clicking on one of them (staying inside of Automotive) until you click another category ie: cellular phones.

Any help would be appreciated.

Abe

 

Hello Abe.
You may want to look deeper into "cookie" and / or "sessionStorage". Then pick and use just one of them, but not both
Either ones should enable your menu to maintain state, in jumping from one page to another.

Hendra

 

Thanks for your reply Hendra. But I wouldn't know where to start on that lol. I don't see anything about cookies or sessionstorage in the files supporting this page?

 

Hello Abu117,

From the JQuery Documentation you can make the "Category" for your menu "active" http://api.jqueryui.com/accordion/#option-active

An easy option for you right now, until you understand session management, is to make the Automotive category active when the Oil Changes, Tires, Detailing, or RV Repair pages are open.

 

There are two ways to do. You hide the data and show them on clicking accordingly or load data into that displaying area. There may be other methods but it depends on which one you are going to use.

 

Well, they are not in your files jut yet. They are something for you to read.

This is one of my best ref. related to cookies I bookmarked long time ago: http://www.quirksmode.org/js/cookies.html. But I'm sure you'll find better ones today. Just try google "read write cookies".

 

Appreciate you guys trying to help, but this is just over my head

Here is my current nav.js file:

$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}

if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");

// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}

else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});

Is there something in there I could change to make it work the way I suggested? Open to suggestions

 

Okay Abe.
Following code is untested, but just try it. To find which lines are new, compare it to your code.

$(document).ready(function(){

    //some functions from http://www.quirksmode.org/js/cookies.html
    function createCookie(name,value,days){
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name){
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
   
    //handle future clicks on menu
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")){
      e.preventDefault();
    }
    if (!$(this).hasClass("open")){
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
     
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
           
            //save to cookie, which <li> is clicked.
            createCookie('indexToOpenedLi', $(this).parent().index(), 0);
    }
    else{
            $(this).next("ul").slideUp(350);
            $(this).removeClass("open");
        }
  });

    //get last <li> clicked saved to cookie and use it to setup menu
    var indexToOpenedLi = readCookie('indexToOpenedLi');
    $('#nav > li').eq(indexToOpenedLi).children('a').click();
       
});

Code (JavaScript):

Hendra

 

Hendra,

That totally works Thank you so so much

 

My pleasure...

 

Hendra...me again

All was OK until I added a new menu item (Contact Us)...see this page please: http://daretocompare.ca/index.php

If you mouse over the link, it shows where it should be going, but nothing happens when clicked upon. My menu structure:

<nav>
<ul id="nav">
<!--Automotive Services and Products -->
<li><a href="#">Automotive</a>
<ul>
<li><a href="oil-changes.php">Oil Changes</a></li>
<li><a href="tires.php">Tires</a></li>
<li><a href="auto-detailing.php">Detailing</a></li>
<li><a href="rv-repair.php">RV Repair</a></li>
</ul>
</li>
<!--Cellular Services and Products -->
<li><a href="#">Cellular Phones</a>
<ul>
<li><a href="#">Cell link 1</a></li>
<li><a href="#">Cell link 2</a></li>
<li><a href="#">Cell link 3</a></li>
</ul>
</li>
<!--Contact Page-->
<li><a href="contact.php">Contact Us</a></li>
</ul>
</nav>
</div>

Once again I appeal to your vast knowledge (yes, I'm sucking up )

Thanks in advance.

Abe

 

Hi Abe.

See http://api.jquery.com/has/

and it must be related to this block:

if($(this).parent().has("ul")){
  e.preventDefault();
}

Code (markup):

I also thought that jQuery's has() returns true or false (a Boolean), but it doesn't. It instead returns a set of jQuery objects (an Array). So I think you should refine the if() statement to check the length.

 

Once again, I'm at your mercy....how would I do this? I really don't know what to do here.

 

if($(this).parent().has("ul").length > 0){
e.preventDefault();
}

If I may... just get some sleep and you'll get your full sense back

 

That did it. Thanks so much, again ! And you assume I had any sense to begin with

 

Hehe, I was just guessing...
But seriously, sleep is always the cheapest and best herb.
Works everytime for me, anytime I lost my senses