I want to "functionalize" more of my jQuery code, instead of writing little standalone snippets. Here's an example. Let's say I have some li's that I'd like to use as triggers, like so:
<li class="alpha-init" id="a-init">A</li>
<li class="alpha-init" id="b-init">B</li>
<li class="alpha-init" id="c-init">C</li>
And some stuff I'd like to hide and show in correspondence to clicks on those triggers, like so:
<ul id="a-sub" class="alpha-popdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="b-sub" class="alpha-popdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="c-sub" class="alpha-popdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
If I wanted to write a little snippet for each case, I could do:
$('li.alpha-init #a-init').click(function(){
$('ul#a-sub').slideToggle(200);
}
But that means writing as many snippets as there are sets of links and submenus. How can I write this into a function? I'm not looking to "eat for a day", so as much explanation as you feel up to writing would be much appreciated. Thanks very much!