How to make accordion using jquery?

Document Sample
How to make accordion using jquery? Powered By Docstoc
					1|Page [Jquery           By Examples: from beginning to professionalism                      ]


How to make accordion?

The following show what we want to do my friend:-




                   Figure “A”                                          Figure “B”



Figure A: illustrate that we want to show 3 div, when the user click first div we get figure B.

Scenario: we put 3 div as title div and 3 div as details div .




Author Name: Web Developer, Mohammed Sallah Yaghi | All rights reserved ©2012
2|Page [Jquery           By Examples: from beginning to professionalism                        ]


We have the following css code in head section:-

  <style type="text/css">

  /*the following for the font of document */

  body {

  font-family:Arial, Helvetica, sans-serif;

  font-size:12px;

  }

  /*the following for the 3 div which are title div or the div we click to show the details */

  .title{

  background-color:#DDDDDD;

  margin-top:10px;

  width:200px;

  border-color:#555555;

  border-style:dotted;

  border-width:1px;

  }

  /*the following for the 3 div which are details , appear when click on the title div */

  .details{

  background-color:#222222;width:150px;border-color:#555555;border-style:dotted;

  border-width:1px;

  color:#EEEEEE;

  display:none; /* important attribute to initially hide the details div’s , see figure A */

  }

  </style>




Author Name: Web Developer, Mohammed Sallah Yaghi | All rights reserved ©2012
3|Page [Jquery          By Examples: from beginning to professionalism                   ]


We have the following Html code in body section:-


     <div class="title"> Title : we All Love jquery </div>

        <div class="details"> Details : nice subjects wirte less do more </div>

     <div class="title"> Title : we All Love PHP </div>

        <div class="details"> Details : Flexible Coding wrtie </div>

     <div class="title"> Title : we All Love Javasript </div>

        <div class="details"> Details : contains many libraries </div>




Note:

    1- There are 3 div showing titles, and 3 div showing details, keep in your mind that the
       details div.’s hidden by css.




Author Name: Web Developer, Mohammed Sallah Yaghi | All rights reserved ©2012
4|Page [Jquery            By Examples: from beginning to professionalism                    ]


We have the following jquery code in head section:-


     <script type="text/javascript" src="jqu.js"></script>

     <script type="text/javascript">

     $(document).ready(function(){

             $('.title').click(function(){

              /* the following mean when click the title div it get the current div which
     clicked and find the next element with class “details” then show it */

            $(this).next('.details').show();



            });

     });

     </script>



Note:

    1- next() function use to refers to the next element follow the selector , I will now show
       some examples about this important function :-

example                                            demonstration

$(selector).next(‘div’)                            Refers to the next div following to this selector

$(selector).next(‘#x1’)                            Refers to the next element following to this
                                                   selector which has id=”x1”




Author Name: Web Developer, Mohammed Sallah Yaghi | All rights reserved ©2012

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:8
posted:11/25/2012
language:English
pages:4
Description: How to make accordion?