Accordian with Jquery

  <script src="Scripts/jquery.js"></script>

    <style>

        .Test

        {

            width: 300px;

            height: 30px;

            background-color: #808080;

            cursor: pointer;

        }

        .Sub

        {

            width: 300px;

            background-color: #989898;

            display: none;

        }

            .Sub div

            {

                width: 300px;

                height: 30px;

            }

    </style>

<div>

<div class="Test">

  Menu1

</div>

<div class="Sub">

  <div>Menu1 </div>

  <div>Menu2 </div>

  <div>Menu3 </div>

</div>

<div class="Test">

   Menu2

</div>

<div class="Sub">

   <div>Menu1 </div>

   <div>Menu2 </div>

   <div>Menu3 </div>

</div>

<div class="Test">

   Menu3

</div>

<div class="Sub">

   <div>Menu1 </div>

   <div>Menu2 </div>

   <div>Menu3 </div>

</div>

</div>

<script type="text/javascript">

        $(document).ready(function () {

            var Lst;

            $(".Test").click(function () {

                if (Lst == this) {

                    return;

                }

                $(".Sub").slideUp();

                $(this).next().slideDown();

                Lst = this;

            });

        });

    </script>