Cara Membuat Accordian Slider

Cara Membuat Accordian Slider

Pada tutorial kali ini saya ingin memberikan informasi bagaimana agar website anda cantik dan atraktif dengan tampilan slide accordian. Slide accordian ini cocok bagi website berita, blog pribadi bahkan website company profile sekelas perusahaan sekaligus. Karena selain menghemat tempat juga informasi yang disampaikan kepada pembaca jelas.

Apa itu Jquery?

Slide Accordian merupakan salah satu program Jquery gratis siap pakai. Jquery merupakan library Javascipt yang artinya kumpulan fungsi javascript yang siap pakai untuk memudahkan membuat aplikasi.

Lalu bagaimana membuat slide accordian yang cantik seperti di atas ya? Anda bisa ikuti langkah-langkah berikut

Adapun file yang anda perlukan adalah sebagai berikut

css
easyAccordion.js
js
file image

Untuk file-file di atas sudah saya siapkan untuk di dowload silahkan klik disini

Jangan lupa untuk memasukkan file diatas sesuai dengan coding dibawah, dan sesuaikan juga dengan image yg anda inginkan.

<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: false	
	         });
        });
      </script>
  </head>
    <body>
    <div class="sample">
        <div id="accordion-2">
            <dl>
                <dt>Slide Pertama</dt>
                <dd><h2>First mammoth here</h2><p><img src="images/img1.png" />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
                <dt>Slide Kedua</dt>
                <dd><h2>Over the moon!</h2><p><img src="images/img2.png" />
                Aenean commodo ligula eget dolor. Aenean massa. 
                Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
                <dt>Slide Ketiga</dt>
                <dd><h2>Another mammoth</h2><p><img src="images/img3.png" />
                Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
                <dt>Slide Keempat</dt>
                <dd><h2>This is my favourite</h2><p><img src="images/img4.png" />
                Cum sociis natoque penatibus et donec quam felis, ultricies nec, 
                pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
           </dl>
        </div>        
    </div>    
  </body>
</html>

Tutorial Slide Accordian sudah selesai, silahkan anda praktekan sendiri, karena teori tanpa praktek sama saja Nol Besar.

Salam Sukses