Cannot differentiate between classes

Cannot differentiate between classes

Hi there - 

I am building a menu system and I cannot seem to differentiate between the different class elements in my menu.  My problem is that when I click on one of the 'buttona' elements, all the ul's with 'effect' fire - does anybody know how to differentiate so that if the one li is clicked just the corresponding ul with open and close?

Thanks!
Rob

my html - 


  1. <ul> 
        <li><a class="buttona" href="#">Application one</a>
            <ul class="effect"> 
                    <li><a href="#">Add</a></li> 
                    <li><a href="#">Edit</a></li> 
                    <li><a href="#">View</a></li>
                    <li class="last"><a href="#">Delete</a></li> 
            </ul> 
        </li> 
        <li><a class="buttona" href="#">Application two</a></li>
        <li><a class="buttona" href="#">Application three</a>
            <ul class="effect"> 
                    <li><a href="#">Add</a></li> 
                    <li><a href="#">Edit</a></li> 
                    <li><a href="#">View</a></li>
                    <li class="last"><a href="#">Delete</a></li> 
            </ul> 
        </li>
    </ul> 

My JS - 
  2. var isHidden = true;
  3. $(function() {
  4. function runEffect(){
  5. if(isHidden) {
  6. $("li ul.effect").show('blind',500);  //run the effect
  7. isHidden = false;
  8. } else {
  9. $("li ul.effect").hide('blind',500);  //run the effect
  10. isHidden = true;
  11. }
  12. };
  14. $(".buttona").click(function() {runEffect(); return false; }); //initiate the click
  15. $(".effect").hide();
  17. });