Primero que nada, me presento: Americo es mi nombre y estoy haciendo una practica de branding en Sharepoint 2014. He estado buscando foros dedicados a JavaScript y jQuery hace un tiempo para poder aclarar algunas dudas que han ido apareciendo durante este tiempo de practica y creo que he encontrado el lugar correcto.

Esta es mi situación: En la empresa donde estoy haciendo la practica usan Sharepoint 2014 online y quieren reestructurar el sitio completo y el primer punto a arreglar es el menu del quicklaunch (el menu de la izquierda). He reorganizado el menu utilizando diferentes niveles (o submenus), después de unos dias pensando y recorriendo el internet logre crear el efecto de expansion para mostrar los subniveles cuando el usuario hace click en el primer nivel y se vuelve a cerrar cuando el usuario escoge otro nivel. Le mostre el progreso a la persona que esta a cargo de mi practica en la empresa y quedo maravillada y muchas felicitaciones, etc. y yo me sentí bien hasta que me dijo: "Podemos mantener el menu abierto mostrando el mismo estado cuando la pagina se recarga o se carga otra pagina?", y con eso termino mi alegría.

He leido que se podría utilizar jquery.cookies para mantener el estado del menu después de recargar la pagina pero sinceramente no se como. Se cual es la función de un cookie pero no se como usarlo en mi código.

Les coloco una version resumida del codigo que he hecho, todos los id, class y span que hay en el html son una copia exacta de la forma en que sharepoint crea los menus, es decir un montón de código para hacer algo simple, pero lamentablemente no lo puedo cambiar por que dejaría de funcionar alguna otra parte del sistema.

Código HTML :

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('.root li ul').hide();
         $('ul li').addClass('reveal');
         $('.reveal').click(function () {
            $(this).siblings('li').find('ul').slideUp();
            $(this).children('ul').slideDown();
         });
      });
   </script>
</head>
<body>

   <ul class="root ms-core-listMenu-root static" id="zz15_RootAspMenu">
      <li class="static">
         <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
            <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Employee</span>
            </span>
         </span>
         
         <ul class="static">
            <li class="static">
               <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                  <span class="additional-background ms-navedit-flyoutArrow">
                     <span class="menu-item-text">List header 1</span>
                  </span>
               </span>
               
               <ul class="static">
                  <li class="static">
                     <a href="/employee/list-header-1/list-1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                        <span class="additional-background ms-navedit-flyoutArrow">
                           <span class="menu-item-text">List 1</span>
                        </span>
                     </a>
                  </li>
                  <li class="static">
                     <a href="/employee/list-header-1/list-2" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                        <span class="additional-background ms-navedit-flyoutArrow">
                           <span class="menu-item-text">List 2</span>
                        </span>
                     </a>
                  </li>
               </ul>
            </li>
            
            <li class="static">
               <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                  <span class="additional-background ms-navedit-flyoutArrow">
                     <span class="menu-item-text">List header 2</span>
                  </span>
               </span>
               
               <ul class="static">
                  <li class="static">
                     <a href="/employee/list-header-2/list-1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                        <span class="additional-background ms-navedit-flyoutArrow">
                           <span class="menu-item-text">List 1</span>
                        </span>
                     </a>
                  </li>
                  <li class="static">
                     <a href="/employee/list-header-2/list-2" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                        <span class="additional-background ms-navedit-flyoutArrow">
                           <span class="menu-item-text">List 2</span>
                        </span>
                     </a>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="static">
         <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
            <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Knowledge</span>
            </span>
         </span>
      </li>
      <li class="static">
         <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
            <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Units &amp; Teams</span>
            </span>
         </span>
         
         <ul class="static">
            <li class="static">
               <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                  <span class="additional-background ms-navedit-flyoutArrow">
                     <span class="menu-item-text">Units</span>
                  </span>
               </span>
               
               <ul class="static">
                  <li class="static">
                     <span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                        <span class="additional-background ms-navedit-flyoutArrow">
                           <span class="menu-item-text">Development</span>
                        </span>
                     </span>
                        
                     <ul class="static">
                        <li class="static">
                           <a href="/units-teams/units/development/list-1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                              <span class="additional-background ms-navedit-flyoutArrow">
                                 <span class="menu-item-text">List 1</span>
                              </span>
                           </a>
                        </li>
                        <li class="static">
                           <a href="/units-teams/units/development/list-2" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">
                              <span class="additional-background ms-navedit-flyoutArrow">
                                 <span class="menu-item-text">List 2</span>
                              </span>
                           </a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>

</body>
</html>


Sharepoint utiliza master pages por lo que esta lista y el script se cargaran en todas las paginas que utilicen este master page, es por eso que necesito saber como conservar el estado de la lista cuando se recargue la pagina.

Aprecio vuestra ayuda enormemente y por supuesto si necesitan algún tipo de ayuda con Sharepoint 2010 o 2014 no duden en consultarme!!!!