Saving UI state with cookie and jquery

I'm trying to save the state of a collapsible menu, and using the jquery cookie plug in .. I'm having trouble so far though.. any help?

The script that does the collapse/expand

<script type="text/javascript">
    $(document).ready(function() {

    $(".login-holder > ul > .loginTitle").click(function() {
        $(this).parent().find("li").slideToggle("fast");
        if ($(this).parent().find(".toggle").html() == "+") {
            $(this).parent().find(".toggle").html("-");
        } else {
            $(this).parent().find(".toggle").html("+");
        }
    });
   })
</script>

The xhtml

<ul class="account-links">
         <div class="loginTitle">User Options<span class="toggle">-</span></div>
         <div class="menuLinks">
         <li>
            <%= Html.ActionLink<EventController>( x => x.List(), "Events Near Me" )%>
         </li>
         <li>
            <%= Html.ActionLink<MyEventsController>( x => x.List(), "My Events" )%>
         </li>
         <li>
            <%= Html.ActionLink<AccountController>( x => x.Edit(), "My Profile" )%>
         </li>
         <li>
            <%= Html.ActionLink<ClubController>( x => x.List(), "Clubs Near Me" )%>
         </li>
         <li> 
            <%= Html.ActionLink<MyClubsController>( x => x.List(), "My Clubs" )%>
         </li>
         <li>
            <%= Html.ActionLink<AccountController>( x => x.ChangePassword(), "Change My Password" )%>
         </li>
         <li>
            <%= Html.ActionLink<DependantController>( x => x.List(), "My Dependants" ) %>
         </li>
        </div>
      </ul>
   </div>
  <% if ( ViewModel.Profile.HasOrganizerInfo ) { %>
  <div class="login-holder">
     <ul class="account-links">
        <div class="loginTitle">Organizer Details<span class="toggle">-</span></div>
        <div class=menuLinks>
        <li>
           <%= Html.ActionLink<AccountController>( x => x.Organizer(), "Organizer Details" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventController>( x => x.Edit( default(int?) ), "Post An Event" )%>
        </li>
        <li>
           <%= Html.ActionLink<EventAdminController>( x => x.List(), "Events Created By Me" ) %>
        </li>
        <li>
           <%= Html.ActionLink<ClubController>( x => x.Edit( default( int? ) ), "Create A Club" )%>
        </li>
        <li>
           <%= Html.ActionLink<ClubAdminController>( x => x.List( ), "Clubs Created By Me" )%>
        </li>
        <开发者_如何学Go/div>
     </ul>
  </div>
  <% } %>

---

One way that I've done this using cookies was to attach an unload handler that set the cookie - it did it by finding the IDs of all the classes that were currently not the default (whether that's visible or hidden is up to you), and then saving them into the cookie. When the page was loaded again, it would check if that cookie existed, and if it did it would use the string of IDs as a selector to apply the toggled from the default class to the items saved earlier.