title: How can I keep the menu open on page reload using an accordian drop menu?
body: <p>I am trying to achieve keeping the menu open on the tab selected as the page reloads to the link clicked.</p>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img  id="icon" src="icons/setup(48).png" /&gt;Setup&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Test&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img  id="icon" src="icons/userProfile_48.png" /&gt;User Maintenance&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img id="icon" src="icons/projects.png" /&gt;Projects&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Project Title&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code> $(document).ready(function(){
       $("#nav &gt; li &gt; 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(300);
               $("#nav li a").removeClass("open");
  
               // open our new menu and add the open class
               $(this).next("ul").slideDown(300);
               $(this).addClass("open");
           }
  
           else if($(this).hasClass("open")) {
               $(this).removeClass("open");
               $(this).next("ul").slideUp(300);
           }
       });
   });
  </code></pre>
  
  <p>At the moment it is working as it should when selecting a link and redirecting to that page but it just does not keep the menu tab open on the new page it loaded.</p>
  
  <p>Some help will be great. Thanks</p>
  
  <p>This part is to assist with keeping the menu open on page load.</p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function () {
      $("#nav li a").click(function (e) {
  
          if ($(this).next("ul").length &gt; 0) {
  
              e.preventDefault();     
              var navInner = $(this).next("ul");
  
              if (navInner.is(":visible")) {
  
              }
  
          }
  
      });
  });
  </code></pre>
  
  <p></p>