Show div when link clicked

Question

I have the following portion of code.

I'd like to hide sub-menu originally and display if the link Type is clicked. How do I do this?

http://jsfiddle.net/jk30af2a/

<div class="thirdy">
    <ul class="sf-menu" style="list-style-type:none">
        <li class="main"><a href="#">Type</a>
          <ul class="sub-menu">
            <li><a href="/teams/" title="View all Teams" >Teams</a></li>
            <li><a href="/events/" title="View all Events" >Event</a></li>
           </ul>
        </li>
    </ul>
</div>

Answer 1

You can write a click event on a element and toggle its next sibling in click handler:

$('.main a').click(function(){
   $(this).next().toggle()
}).click();//<-- for hiding the options by default on load

Working Demo

Answer 2

you code be something like this http://jsfiddle.net/elviz/045z9gdr/1/

$(".sub-menu").toggle();
     $(".main").click(function(){
       $(".sub-menu").toggle();
 });

Answer 3

You can use toggleClass()

Jquery

 $(".main").click(function(){
    $(this).find($(".sub-menu")).toggleClass("hidden");
});

CSS

.hidden{
    display: none;
}

JsFiddle