How do I refrence the 'class' or 'id' of a sub menu when the parent list item is clicked ?

[talk2toyin]

I'm trying to use jquery effects for a menu system that lists out archives pulled dynamically from the database. The menu will be like this:

 

2013>

. Jan

. Feb

. Mar

. All

 

2012>

. Jan

. Feb

. Mar

. All

 

and so on... The sub links will be hidden when the pages loads and then, on clicking any of the listed year, the sub links(months) are displayed or hidden using the jquery blind effect.

 

Here's my html:

<div class='arch'>

<ul class='nav nav-list'>

<li class='dropdown arch-dropdown'>

<a href='#' class='' toggle-dropdown='dropdown'>2013 <span class='caret'></span></a>

<ul class='arch-menu'>

<li><a href='#' class='active'>Jan</a></li>

<li><a href='#' class='active'>Feb</a></li>

<li><a href='#' class='active'>Mar</a></li>

</ul>

</li>

<li class='dropdown arch-dropdown'>

<a href='#' class='' toggle-dropdown='dropdown'>2012 <span class='caret'></span></a>

<ul class='arch-menu'>

<li><a href='#' class='active'>Jan</a></li>

<li><a href='#' class='active'>Feb</a></li>

<li><a href='#' class='active'>Mar</a></li>

</ul>

</li>

</ul>

</div>

 

I'm using Bootstrap for my HTML and CSS. Sorry if there are any mistakes in my html code, i had to type with my phone, off hand.

 

My JQuery:

$(document).function({

$(".arch-dropdown").click(function() {

$(".arch-menu").toggle("blind", 500);

});

});

 

but the above code only makes the whole sub-links of all the listed archives toggle. I can't seem to get it to work for only which was clicked. Thanks in advance.

[talk2toyin]

Sorry, only the currently active .arch-menu have the .active class; ignore others please. urgent help needed. thanks