Sunday, 18 August 2013

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>

No comments:

Post a comment