JQuery accordeon menu with children and show active page

JQuery accordeon menu with children and show active page

I want to create an accordeon menu with jQuery which remembers the active
page. Now i've got the following menu:
<nav id="secondary">
<ul id="nav">
<li class="tournament">
<a onclick="function">Belgie</a>
<ul class="sub" style="display: none;">
<li>
<li class="first"><a href="tournament1">tournament1</a></li>
<li class="last"><a href="test">test</a></li>
</li>
</ul>
</li>
<li class="tournament">
<a onclick="function">Nederland</a>
<ul class="sub" style="display: none;">
<li>
<li class="first"><a
href="Nedtournament1">Nedtournament1</a></li>
<li class="has_children current">
<a href="Nedtournament2">Nedtournament2</a>
<ul class="dropdown">
<li class="first"><a
href="subtournament2-1">subtournament2-1</a></li>
<li class="last current"><a
href="subtournament2-2">subtournament2-2</a></li>
</ul>
</li>
<li><a href="Nedtournament3">Nedtournament3</a></li>
<li class="last"><a href="Nedtournament3">Nedtournament3</a></li>
</li>
</ul>
</nav>
Im using the following jQuery, it sets a cookie to determine on which page
we are and which menu should be expanded. This works, but not for the
children pages.
// creatie cookie
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
// use cookie value
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
// complete jquery
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
});
does anyone know how I can add the cild pages to they expand when I click
them? And they keep expanded when i reload the page.