Kemarin saya telah memposting tutorial tentang kostumisasi fitur carousel / slide dari twitter bootstrap 3, kali ini saya akan memberikan tutorial untuk kostumisasi fitur collapse / accourdion twitter bootstrap 3. Saya akan mencoba untuk membuat slideshow dengan disisipi accourdion di dalamnya. bagaimana, tertarik untuk mengikuti tutorial ini? yuk kita coba!.

Seperti biasa kalau kita ingin meng-customize (kostumisasi) fitur twitter bootstrap, kita harus tau hal penting / element / attribute penting yang digunakan fitur dari twitter bootstrap itu sendiri. Berdasarkan dokumentasi dari twitter bootstrap untuk fitur collapse, berikut saya jabarkan :

• Attribute data-toggle="collapse"
• Attribute href="#..." pada link untuk menunjuk target, dan id="..." pada body collapse untuk targetnya, jika pentunjuk target nya href="#target-collapse" maka targetnya harus memiliki attribute dengan nama id="target-collapse"
• Petunjuk target href="#..." bisa digantikan menggunakan attribute data-target="..."
• Yang terakhir yaitu data-parent="#..."
• Begini kira-kira cara kerja collapse bootstrap :
  

Setelah mengetahui hal /element /attribute penting dari collapse bootstrap, agar lebih mudah untuk target acuan untuk kostumisasi collapse saya akan mencoba kostumisasi collapse bootstrap agar menjadi seperti ini http://www.devphp.net/index.php/concrete5-add-ons/accordion-slide-show/

1. Dilihat dari gambar di atas collapse harus dirubah orientasinya dari vertikal (default collapse bootstrap) menjadi horizontal. Saya punya kode HTML seperti ini
   

   <div class="container">
       <div class="row">
           <div class="content">
               <div class="panel-group" id="accordion">
                   <div class="panel panel-default">
                       <div class="panel-heading">
                            <h4 class="panel-title">
                           <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                             Suzuki
                           </a>
                         </h4>
   
                       </div>
                       <div id="collapseOne" class="panel-collapse collapse in">
                           <div class="panel-body">
                               <img src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" />
                           </div>
                       </div>
                   </div>
                   <div class="panel panel-default">
                       <div class="panel-heading">
                            <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                     Chevrolet
                   </a>
                 </h4>
   
                       </div>
                       <div id="collapseTwo" class="panel-collapse collapse">
                           <div class="panel-body">
                               <img src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" />
                           </div>
                       </div>
                   </div>
                   <div class="panel panel-default">
                       <div class="panel-heading">
                            <h4 class="panel-title">
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                     Volvo
                   </a>
                 </h4>
   
                       </div>
                       <div id="collapseThree" class="panel-collapse collapse">
                           <div class="panel-body">
                               <img src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

   Untuk kasus ini kita hanya perlu bermain di css / style dan memanfaatkan CSS3 transform Property untuk rotasi element. Pertama kita rotasi dulu semua komponen collapse (class panel-group), karena rotasi yang harus dilakukan adalah berlawanan dengan arah jarum jam jadi nilai rotasinya adalah -90 maka css nya seperti ini
   

   .panel-group {
       /*! karena rotasi maka width dianggap height */
       width:430px;
       z-index: 100;
       -webkit-backface-visibility: hidden;
       -webkit-transform: translateX(-100%) rotate(-90deg);
       -webkit-transform-origin: right top;
       -moz-transform: translateX(-100%) rotate(-90deg);
       -moz-transform-origin: right top;
       -o-transform: translateX(-100%) rotate(-90deg);
       -o-transform-origin: right top;
       transform: translateX(-100%) rotate(-90deg);
       transform-origin: right top;
   }

   
   Karena .panel-group dirotasi otomatis children element from panel-group (element didalam panel-group) juga ikut dirotasi, kita hanya perlu rotasi konten didalam body collpase, konten body collpase yang saya punya adalah image maka css untuk rotasi image seperti ini
   

   .panel-group img {
       -webkit-backface-visibility: hidden;
       -webkit-transform: translateX(-100%) rotate(90deg);
       -webkit-transform-origin: right top;
       -moz-transform: translateX(-100%) rotate(90deg);
       -moz-transform-origin: right top;
       -o-transform: translateX(-100%) rotate(90deg);
       -o-transform-origin: right top;
       transform: translateX(-100%) rotate(90deg);
       transform-origin: right top;
   }

   
   Kemudian terakhir (untuk kasus ini) kita harus menyesuaikan (mengatur) posisi semua element agar terlihat rapih, setelah semuanya diatur maka hasilnya akan seperti ini Demo Part 1 untuk kode html dan css bisa dilihat disini http://jsfiddle.net/fauzi/q9GLR/ 
2. Setelah merotasi collapse dan hasilnya sempurna maka langkah selanjutnya adalah menambahkan fungsi slide pada collpase, kasus ini kita bisa menggunakan metode setInterval untuk mengaktifkan collapse, berikut kode javascript untuk slide collapse
   

   $(document).ready(function(){
       $(function() {
           setInterval( function(){
           var $active = $('#accordion .collapse.in');
           var $parent = $active.closest('.panel');
           $active.collapse('hide');
           if ($parent.is('#accordion .panel:last')) {
               $('#accordion .panel:first').find('.collapse').collapse('toggle');
           } else {
               $parent.next().find('.collapse').collapse('toggle');
           }
           }, 10000 );
       }); 
   });
   

   Dan berikut hasil akhirnya
   
   
   Untuk lebih jelas bisa lihat pada link berikut Demo Part 2.
3. Jika menginginkan adanya tambahan komponen dalam slide, misalkan button/link, kita tinggal tambahkan button/link di bawah image dan menambahkan css nya seperti ini
   

   /*! Untuk merotasi button */
   .panel-group img, .panel-group button {
       -webkit-backface-visibility: hidden;
       -webkit-transform: translateX(-100%) rotate(90deg);
       -webkit-transform-origin: right top;
       -moz-transform: translateX(-100%) rotate(90deg);
       -moz-transform-origin: right top;
       -o-transform: translateX(-100%) rotate(90deg);
       -o-transform-origin: right top;
       transform: translateX(-100%) rotate(90deg);
       transform-origin: right top;
   }
   /*! posisi button atas kiri slide */
   .panel-group .panel .top-left {
       margin-left:380px;
       margin-top:180px;
       position: absolute;
   }
   /*! posisi button atas kanan slide */
   .panel-group .panel .top-right {
       margin-left:380px;
       margin-top:750px;
       position: absolute;
   }
   /*! posisi button bawah kiri slide */
   .panel-group .panel .bottom-left {
       margin-left:80px;
       margin-top:180px;
       position: absolute;
   }
   /*! posisi button bawah kanan slide */
   .panel-group .panel .bottom-right {
       margin-left:80px;
       margin-top:750px;
       position: absolute;
   }

Jika ada pertanyaan silahkan tuliskan di komentar.

Selamat Mencoba!