Как сделать аккордеон можно почитать на mootools.net
Для h3 и div js скрипт выглядит так:
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
Для случая css меню, построенного на ul списках у меня получился вот такой код:
window.addEvent('domready', function(){
$$('.menu_left a.haschild').each(function(el){
el.addEvent('click', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
});
});
ael = $E('.menu_left li.active');
qIndex = $$('.menu_left li.toplist').indexOf(ael);
var accordion = new Accordion('.menu_left a.haschild', '.menu_left li.haschild ul', {
opacity: false,
onActive: function(toggler, element){
//toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
//toggler.setStyle('color', '#222');
} ,
display:-1
}, $('accordion'));
accordion.display(qIndex);
});
.menu_left - класс задается в поле суффикс класса модуля
Элементы списка у которых есть подпункты меню имеют класс .haschild
Задать этот класс можно в раскладке модуля mainmenu. Для этого нужно в папке html создать папку mod_mainmenu и скопировать туда default.php
Там сделать соответствующие изменения для класса .toplist, это верхний уровень меню и класса .haschild - {filer 168 download}.
Вкладка аккордеона открывается с помощью метода display:
accordion.display(qIndex);
qIndex - это номер вкладки
Чтобы закрыть все вкладки задаем индекс -1
Индекс нужной вкладки находим так:
$$('.menu_left a.haschild').each(function(el){
el.addEvent('click', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
});
});
ael = $E('.menu_left li.active');
qIndex = $$('.menu_left li.toplist').indexOf(ael);