There are so many 'huge' accordion scripts around and I am confused.

Can anyone suggest me a simple code to turn this list into a accordion panel. To start with, only the 'Sports' list will be visible. Then when the user clicks on either Technology or Latest, the Sports will hide and the one clicked will show up and so on..

<ul id="accordion">
    <li>Sports</li>
    <ul>
        <li><a href="#">Golf</a></li>
        <li><a href="#">Cricket</a></li>
        <li><a href="#">Football</a></li>
    </ul>
    <li>Technology</li>
    <ul>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
    <li>Latest</li>
    <ul>
        <li><a href="#">Obama</a></li>
        <li><a href="#">Iran Election</a></li>
        <li><a href="#">Health Care</a></li>
    </ul>
</ul>