Multi Accordion with mootools problem
I created a mootools accordion with nested sections like this:
html:
<div class="accordion">
<h2 class="accordion_toggler_1 open">Section 1</h2>
<div class="sub_accordion accordion_content_1 open">
<h2 class="accordion_toggler_2 open">Section 1.1</h2>
<div class="sub_accordion accordion_content_2 open">
Content 1.1
</div>
<h2 class="accordion_toggler_3">Section 1.2</h2>
<div class="sub_accordion accordion_content_3">
Content 1.2
</div>
</div>
<h2 class="accordion_toggler_4">Section 2</h2>
<div class="sub_accordion accordion_content_4">
<h2 class="accordion_toggler_5">Section 2.1</h2>
<div class="sub_accordion accordion_content_5">
Content 2.1
</div>
<h2 class="accordion_toggler_6">Section 2.2</h2>
<div class="sub_accordion accordion_content_6">
Content 2.2
</div>
</div>
<h2 class="accordion_toggler_7">Section 3</h2>
<div class="sub_accordion accordion_content_7">
Content 3
</div>
</div>
JS:
window.addEvent('domready', function() {
// Adaption IE6
if(window.ie6) var 开发者_如何学编程heightValue='100%';
else var heightValue='';
// Selectors of the containers for switches and content
var togglerName='h2.accordion_toggler_';
var contentName='div.accordion_content_';
// Position selectors
var counter=1;
var toggler=$$(togglerName+counter);
var content=$$(contentName+counter);
while(toggler.length>0)
{
// Apply accordion
new Fx.Accordion(toggler, content, {
onComplete: function() {
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle('height', heightValue);
},
onActive: function(toggler, content) {
toggler.addClass('open');
},
onBackground: function(toggler, content) {
toggler.removeClass('open');
}
});
// Set selectors for next level
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}
});
The problem is that all section are open when the page loads and I wanted just the first top section and sub section.
Example:
Section 1
Section 1.1
Content 1.1
Section 1.2
Section 2
Section 3
Can anyone help??
Thanks
may this will help you or get more detail here
//edit html
<div class="accordion">
<h2 class="accordion_toggler_1" id="open_accordion_entry">section</h2>
<div class=" accordion_content_1">
<h2 class="accordion_toggler_2" id="open_accordion_entry1">section 1.1</h2>
<div class=" accordion_content_2">
content 1.1
</div>
<h2 class="accordion_toggler_2">section 1.2</h2>
<div class=" accordion_content_2">
content 1.2
</div>
</div>
<h2 class="accordion_toggler_1">Section 2</h2>
<div class="accordion_content accordion_content_1"><p>content 2</p></div>
<h2 class="accordion_toggler_1">Section 3</h2>
<div class="accordion_content accordion_content_1"><p>content 3</p></div>
</div>
//js
window.addEvent('domready', function() {
if(window.ie6) var heightValue='100%';
else var heightValue='';
var togglerName='h2.accordion_toggler_';
var contentName='div.accordion_content_';
var counter=1;
var toggler=$$(togglerName+counter);
var content=$$(contentName+counter);
while(toggler.length>0)
{
new Accordion(toggler, content, {
opacity: false,
display: -1,
onComplete: function() {
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle('height', heightValue);
},
onActive: function(toggler, content) {
toggler.addClass('open');
},
onBackground: function(toggler, content) {
toggler.removeClass('open');
}
});
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}
$$('#open_accordion_entry1').fireEvent('click');
$$('#open_accordion_entry').fireEvent('click');
});
精彩评论