Monday 14 May 2012

Jquery Accordion


Join Us:http://anybodycancode.com
  • This example needs jquery library,which is already included in Visual Studio 2010
  • Paste the following code inside the <head> tag
    • <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    •     
    •     <style type="text/css">
    •         .active
    •         {
    •             background-color:Red;
    •             color:White;
    •             border:1px solid gray;
    •             
    •         }
    •         .accordion h3
    •         {
    •             border:1px solid red;
    •             padding:0px;
    •             margin:0px;
    •         }
    •         .accordion p
    •         {
    •              background-color:Aqua;
    •              color:Black;
    •              border:1px solid black;
    •              padding:0px;
    •              margin:0px;
    •              height:100px;
    •         }
    •        
    •     </style>
    •     
    •     <script type="text/javascript">
    •         $(document).ready(function () {
    •             $('.accordion h3:first').addClass("active"); $('.accordion p:not(:first)').hide();

    •             $('.accordion h3').click(function () {
    •                 $(this).addClass("active").siblings("h3").removeClass(); $(this).next("p").slideDown("slow");
    •                 $(this).next("p").siblings("p:visible").slideUp("slow");

    •             });

    •         });
    •     </script>
  • Paste the following code inside the <body>tag
    • <div class="accordion" style="border:1px solid red; width:200px">
    •             <h3>
    •                 Salim
    •             </h3>
    •             <p>
    •                     Father</p>
    •             <h3>
    •                 Shanti
    •             </h3>
    •             <p>
    •                     Mother</p>
    •             <h3>
    •                 Shahnaz
    •             </h3>
    •             <p>
    •                     Sister</p>
    •             <h3>
    •                 Sajid
    •             </h3>
    •             <p>
    •                     Me</p>
    •             <h3>
    •                 Abid
    •             </h3>
    •             <p>
    •                     Brother</p>
    •         </div>
Join Us:http://anybodycancode.com