help me.

help me.

my html like this

  1. <dl id="horizonal-menu">
        <dt><span>Menu<span></dt>
            <dd>
                <ul>
                    <li><a href="#"><span>Vertical Menu<span></a></li>
                    <li><a href="#"><span>Horizontal Menu</span></a></li>
                </ul>
            </dd>
         <dt><span>Form</span></dt>
             <dd>
                <ul>
                    <li><a href="#"><span>Html Form</span></a></li>
                    <li><a href="#"><span>Ajax Form</span></a></li>
                </ul>
            </dd>
    </dl>














when the site was created. dd tags are hide. when the user click dt tag that will show dd stay behind. example: clicked
  1. <dt><span>Form</span></dt>
dd show
  1.       <dd>
  2.             <ul>
                    <li><a href="#"><span>Html Form</span></a></li>
                    <li><a href="#"><span>Ajax Form</span></a></li>
                </ul>
            </dd>



later, the user clicked
  1. <dt><span>Menu<span></dt>
show dd
  1.       <dd>
                <ul>
                    <li><a href="#"><span>Vertical Menu<span></a></li>
                    <li><a href="#"><span>Horizontal Menu</span></a></li>
                </ul>
            </dd>




and hide dd
  1.       <dd>
                <ul>
                    <li><a href="#"><span>Html Form</span></a></li>
                    <li><a href="#"><span>Ajax Form</span></a></li>
                </ul>
            </dd>




if user click dt and dd  is showing don't do anything. how i do that. please help me?