Tab Accordian Bubbling Library

Ada yang menyebutnya efek tirai  atau juga sliding door. namun jika kita gooling,   input kata atau istilah yang populer untuk efek ini adalah " accordian ".  Effek ini bisa saudara rasakan  langsung pada sidebar kanan blog saya paling atas:  Profile , Comment , Contact.

Seperti hal-nya Tab View yang lebih dulu populer di gunakan oleh para blogger lokal, efek ini juga merupakan library javascript dari YUI (  Yahoo User Interface ), namun di iris lagi menjadi Javascript Bubbling Library, yang menurut situs resminya lisensi bebas di gunakan.

" All components in the Bubbling Library have been released as open source under a BSD license and are free for all uses."

Selain tab " Accordian "  ini, banyak juga plugin yang tersedia pada Bubbling Library , kita langsung tinggal pake saja. tampa perlu nyegir. karena tersedia beberapa pustaka skrip dan framework untuk kita gunakan.

Contohnya efek " Accordian"  pada blog saya ini.

Untuk menerapkanya ke dalam blog  , yang perlu kita lakukan.

1. Buka Tata-Letak - Edit Html. kemudian cari tag penutup

</head>

setelah itu masukan sebelum tag penutup tersebut . kode berikut ini.

kode Css.

<style type="text/css">
.myAccordion {
  float: left;
  margin-right: 15px;
}
  .myAccordion .yui-cms-accordion .yui-cms-item {
    border: 1px solid #cccccc;
    width: 200px;
  }
    .myAccordion .yui-cms-accordion .yui-cms-item h3 {
      margin: 0px;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
          background: url(../images/accordion.gif) no-repeat 0px 0px;
          text-decoration: none;
          padding-left: 20px;
          display: block;
        }
        .myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
          background: url(../images/accordion.gif) no-repeat 0px -100px;
        }
    .myAccordion .yui-cms-accordion .yui-cms-item .bd {
        height: 0px;
        overflow: hidden;
        background-color: #fff;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
            overflow: hidden;
            padding: 5px;
            height: 230px;
        }
</style>

 

Dan kode Javascript ini.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/accordion/accordion.js"></script>

 

Simpan Perubahan

2. Kemudian tambahkan sebuah Elemen Html/JavaScript .

Setelah terbuka masukan kode berikut ini.

<div class="myAccordion">   
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>

Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>


Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.




</p>
</div>
</div>
</div>

<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>

Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>

<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>

Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
</div>
</div>