Simple Mootools Accordion

Mootools Accordion adalah plugin dari mootools yang memberikan efek seperti accordion. Jika Salah satu menu terbuka maka menu yang lainnya akan tertutup. Saya akan coba menjelaskan bagaimana cara menggunakan mootools accordion.

Requirements

• Mootools-core (versi berapa saja)
• Fx.Accordion yang ada pada Mootools-more

Fx.Accordion adalah salah satu official plugin dari Mootools. Dengan menggunakan effect ini, menu akan terlihat lebih indah. Langsung saja pada cara menggunakannya.
include file mootools pada html, simpan script berikut diantara tag head.

1.<script type="text/javascript" src="/mootools-core.js"></script>

2.<script type="text/javascript" src="/mootools-more.js"></script>

The HTML

Ini adalah skrip html yang saya gunakan. Mootols accordion dapat ditempatkan di mana saja. Perhatikan pada skrip dibawah ini, saya menggunakan class toggler dan element. Tag html h3 dengan class toggler berfungsi sebagai pemicu accordion, jika tag h3 di klik maka accordion akan muncul. Tag div dengan class element adalah bagian yang disembunyikan oleh accordion.

01.<div class="accordion">

02.  <h3 class="toggler">Menu 1</h3>

03.  <div class="element">

04.    <ul>

05.      <li>Dummy Menu 1</li>

06.      <li>Dummy Menu 2</li>

07.      <li>Dummy Menu 3</li>

08.    </ul>

09.  </div>

10.</div>

11. 

12.<div class="accordion">

13.  <h3 class="toggler">Menu 2</h3>

14.  <div class="element">

15.    <ul>

16.      <li>Dummy Menu 1</li>

17.      <li>Dummy Menu 2</li>

18.      <li>Dummy Menu 3</li>

19.    </ul>

20.  </div>

21.</div>

22. 

23.<div class="accordion">

24.  <h3 class="toggler">Menu 3</h3>

25.  <div class="element">

26.    <ul>

27.      <li>Dummy Menu 1</li>

28.      <li>Dummy Menu 2</li>

29.      <li>Dummy Menu 3</li>

30.    </ul>

31.  </div>

32.</div>

The Javascript

Letakkan skrip berikut di dalam tag head.

01.window.addEvent('domready',function(){

02.        var accordion = new Accordion($$('h3.toggler'),$$('.element'),{

03.        onActive: function(toggler) {toggler.setStyle(

04.            'background','url(accor_onAct.png) no-repeat right');

05.        },

06.        onBackground: function(toggler) {toggler.setStyle(

07.            'background','url(accor_onBack.png) no-repeat right');}

08.        });

09.    });

Pada mootools accordion ada option onActive, function yang di dalam option onActive akan dilakukan saat accordion terbuka. Sedankan option onBackground berfungsi sebaliknya, function yang ada di dalam option onBackground akan dilakukan jika accordion tertutup. Untuk lebih jelasnya tentang option pada Fx.Accordion dapat dilihat pada Mootools Documentation.
Mootools Accordion sudah dapat digunakan. Jika accordion terbuka akan ada tanda "+" disebelah kanan dan jika accordion tertutup tanda " - " akan muncul. Simple dan mudah bukan ? Semoga membantu.

 View Demo 

Source : http://gadaguna.freevar.com/index.php/mootools/19-simple-mootools-accordion