title: Tree navigation of nested lists
body: <p>i am trying to develop a navigation tree for my website, but had no luck with its dynamic arrangement.
  The problem is:
  i want to open the internal UL whenever there is clicked on Internal LI's , i am able to get index of the clicked internal Ul but cant use that index variable globally. </p>
  
  <ul>
  <li>the page is getting reloaded everytime i click on any link so is there a solution using cookies??      </li>
  </ul>
  
  <p>here is the html:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
            &lt;li&gt; &lt;a href="#"&gt;Order Management&lt;/a&gt;
                &lt;ul id="test"&gt;
                &lt;li&gt;&lt;a href="#" class="even"&gt;orders&lt;/a&gt;&lt;/li&gt;
  
  
        &lt;li&gt;&lt;a href="#" class="odd"&gt;Search Orders&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="#" class="even"&gt;Orderdetail&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
  
      &lt;li&gt; &lt;a href="#"&gt;Discount Management&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="even"&gt;Subject&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="odd"&gt;Category&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="even"&gt;Publisher&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="odd"&gt;Author&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="even"&gt;Particular Book&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt; &lt;a href="#"&gt;Upload File&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="even"&gt;Upload excel file&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Reports&lt;/a&gt;
            &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="#" class="even"&gt;data over view&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#" class="odd"&gt;Out Of Stock Product&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="even"&gt;Invoice Report&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="odd"&gt;SerachInvoicDispacthed&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li&gt; &lt;a href="#"&gt;Store Management&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="even"&gt;Currency&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="odd"&gt;Add Country&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
  
        &lt;/ul&gt;
  </code></pre>
  
  <p>here is the Js:</p>
  
  <pre><code>    function initMenu() {
                     $('#menu ul').hide();
      $('#menu li a').click(
          function() {
            var checkElement = $(this).next();
  
            if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
              return false;
              }
            if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
              $('#menu ul:visible').slideUp('normal');
              checkElement.slideDown('normal');
              return false;
              }
            }
          );
          var myIndex = 0;
                     var items = $('#menu ul').click(function() {
                     //e.preventDefault();
                     myIndex = items.index(this);
                     console.log('the index is:'+myIndex);
  //here i got index in var myIndex
                      }
                     );
  //but i can not access myIndex here , it keeps returning zero
  $('#menu  ul:eq('+myIndex+')').show("slow");
  
        }
      $(document).ready(function() {initMenu();});
  </code></pre>
  
  <p>my account is already blocked because of this question once , i request you people as i am very eager to get solution of this question. 
  here is the fiddle <a href="http://jsfiddle.net/Ekn2V/1/" rel="nofollow">http://jsfiddle.net/Ekn2V/1/</a>
  there are no actual links but when i use real links the page get reload as defined in my struts.xml , so the page reloads everything that here occured by js is overlooked please tell me a cookie or something like that related solution.
  i have experience in java se development and i am noob in web development.
  any help would be appreciated, thank you.</p>