Thursday, November 28, 2013

Horizontal Accordion Menggunakan Jquery

Salah satu contoh plugin untuk horizontal accordion adalah jquery Easy Accordion. Plugin easy accordion terdiri dari 2 file yaitu jquery.easyAccordion.min.js dan easyaccordion.css serta didukung oleh jquery.js.
Apabila kita ingin menggunakan efek slideshow pada horizontal accordion maka kita perlu menambahkan "slideinterval : 3000" maka slide akan berganti setiap 3 detik.

<!DOCTYPE html>
<html>
   <head>
 <title>jQuery Easy Accordion</title>
      <link href="easyAccordion.css" rel="stylesheet" />

   <script src="jquery.js"></script>
   <script src="jquery.easyAccordion.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
        $('#accordion-2').easyAccordion({
      autoStart: true,
  slideInterval:5000
        });
        });
      </script>
  </head>


    <body>
        <div id="accordion-2">
            <dl>
                <dt>Slide Pertama</dt>
                <dd><h2>Pertama</h2><p>
Isi slide pertama
</p></dd>
                <dt>Slide Kedua</dt>
                <dd><h2>Ke Dua</h2><p>
Isi slide kedua
</p></dd>
                <dt>Slide Ketiga</dt>
                <dd><h2>Ketiga</h2><p>
                Isi slide ketiga
</p></dd>              
           </dl>
        </div>          
  </body>
</html>
Contoh Tampilan

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.