Dynamically show and Hide the Menu

Dynamically show and Hide the Menu

<ul class="ulMenu">   
<li class="mains">
        <a href="#" class="clicker">Main Heading 1</a>
        <ul class="sub1">
            <li>
                <a href="#" class="clicker">Main Heading 2</a>
                <ul class="sub1">
                 <li>
                     <a href="#" class="clicker">Sub Heading 1</a>
                        <ul class="sub1">
                            <li><a href="#">Sub Heading 2</a></li>
                            <li><a href="#">Main Heading 3</a></li>
                            <li><a href="#">Main Heading 4</a></li>
                            <li><a href="#">Main Heading 5</a></li>
                        </ul>
                 </li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>           
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 3</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 4</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 5</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
        </ul>   
    </li>
 <li class="mains">
        <a href="#" class="clicker">Main Heading 2</a>
        <ul class="sub1">
            <li>
                <a href="#" class="clicker">Main Heading 2</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 3</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 4</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="clicker">Main Heading 5</a>
                <ul class="sub1">
                    <li><a href="#">Main Heading 2</a></li>
                    <li><a href="#">Main Heading 3</a></li>
                    <li><a href="#">Main Heading 4</a></li>
                    <li><a href="#">Main Heading 5</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

i am trying to create tree
but it should not hide the other when i clicked on other <a>.i  need to parallel y show and hide the  class="sub1" that too in that child only

for Ex:
         1
           |
           | ----------2
           |           |
           |           3---------------4
           |            |
           |            5--------------6
           |                            |
           |                            7
           |-----------8             
           |            |
                       9-------------10             
           |
          11---

when i click on '1' it shoud open only '1' when click on '11' it should close '1' and open '11'
when i click on '2' it shoud open only  '3','5'  when click on '8' it should close '2' and open '9'

i think you have understud my problem can any one help me.