Question

I have a problem and can’t find a solution.
I am making an accordion menu in jquery and want the second level of the menu to open one at a time.

and would like to use this on a website any help in how to get this to stay open when the page reloads.

my first time asking so sorry if it is not readable.

hope anybody can help.

I am a noob in this kind of stuff.

$(document).ready(function(){
  menuHead = $('.slide-list li a').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    $(this).next().toggle("slow");
  });    
});

* {
  margin: 0;
  padding: 0;   
}

html, body {
  height: 100%;
  width: 100%;  
}

a:link {
  text-decoration:none;
  color: #000;
}

a:active {
  text-decoration:none;
  color: #000;
}

a:visitied {
  text-decoration:none;
  color: #000;  
}

a:hover {
  text-decoration:none;
  color: #CCC;
}


#menu-wrapper {

}

#menu-wrapper ul.slide-list li {
  list-style-type: none;    
}

#menu-wrapper ul.slide-list li a.selected {
  color: #F00;  
}

#menu-wrapper ul.slide-list li ul {
  display: none;    
}

#menu-wrapper ul.slide-list li ul li ul {
  display: none;    
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="menu-wrapper">
  <ul class="slide-list">
    <li>
        <a href="javascript:void()">menu item 1</a>
          <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
                  <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
              <li>
                <a href="javascript:void()">submenu item 2 level 2</a>
                  <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
        <a href="javascript:void()">menu item 2</a>
          <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
              </li>
          </ul>     
      </li>
    <li>
        <a href="javascript:void()">menu item 3</a>
      </li>
  </ul>
</div>

Answer 1

Try this

if(window.location.hash.length > 0){
  var $licurrent = $($('.slide-list li').get(window.location.hash.replace('#','')));
  $licurrent.parents("ul").show();
  $licurrent.find("ul:first").show();
  $licurrent.find("a:first").addClass("selected");
}

$(document).ready(function(){
  $('.slide-list li a').click(function(e) {                     
      e.preventDefault();
      $('.selected').removeClass('selected');
      $(this).addClass('selected');

      var $licurrent = $(this).parent();
      window.location.hash = $('.slide-list li').index($licurrent);

      $licurrent.parent().find("li").not($licurrent).find("ul").hide("slow");
      $(this).next("ul").toggle("slow");
  });
});

* {
  margin: 0;
  padding: 0;    
}

html, body {
  height: 100%;
  width: 100%;    
}

a:link {
  text-decoration:none;
  color: #000;
}

a:active {
  text-decoration:none;
  color: #000;
}

a:visitied {
  text-decoration:none;
  color: #000;    
}

a:hover {
  text-decoration:none;
  color: #CCC;
}


#menu-wrapper {

}

#menu-wrapper ul.slide-list li {
  list-style-type: none;  
}

#menu-wrapper ul.slide-list li a.selected {
  color: #F00;    
}

#menu-wrapper ul.slide-list li ul {
  display: none;  
}

#menu-wrapper ul.slide-list li ul li ul {
  display: none;  
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="menu-wrapper">
  <ul class="slide-list">
      <li>
          <a href="javascript:void()">menu item 1</a>
          <ul>
              <li>
                  <a href="javascript:void()">submenu item 1 level 2</a>
                  <ul>
                      <li>
                          <a href="javascript:void()">submenu item level 3</a>
                          <ul>
                            <li>
                                <a href="javascript:void()">submenu item level 4</a>
                            </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="javascript:void()">submenu item 2 level 2</a>
                  <ul>
                      <li>
                          <a href="javascript:void()">submenu item level 3</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
          <a href="javascript:void()">menu item 2</a>
          <ul>
              <li>
                  <a href="javascript:void()">submenu item 1 level 2</a>
              </li>
          </ul>     
      </li>
      <li>
          <a href="javascript:void()">menu item 3</a>
      </li>
  </ul>
</div>

This code will add the hash in URL and when you refresh the page you could find that menu selected.