Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
153 lines (131 sloc) 4.66 KB
<style>
dt {
border: 1px solid #999;
background: #ddd;
margin: 2px;
padding: 2px;
cursor: pointer;
}
hr {
margin: 10px 0px;
background: #000;
border: none;
height: 3px;
}
p {
margin: 4px 0px;
}
</style>
<p>The headers below should display their corresponding section when clicked, hiding whichever section is currently visible. The "detach" link below should disable this behavior while the "attach" link should re-enable it. Also note that unlike the other examples on this page, this accordion will initialize without an effect (the first section will instantly be visible).</p>
<dl id="acc1">
<dl>
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
</dl>
<a id="detach">detach</a> | <a id="attach">attach</a>
<script src="/depender/build?require=More/Fx.Accordion"></script>
<script>
var acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'), {
initialDisplayFx: false
});
$('detach').addEvent('click', function(){
acc.detach();
});
$('attach').addEvent('click', function(){
acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'));
});
</script>
<hr/>
<p>This example should behave as above, except the sections will be visible when you mouseover the headers, rather than click.</p>
<dl id="acc2">
<dl>
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
</dl>
<script>
new Fx.Accordion($$('#acc2 dt'), $$('#acc2 dd'),{
trigger: 'mouseenter'
});
</script>
<hr/>
<p>The section below should have a 4th section, added dynamically, which is clickable like the others.</p>
<dl id="acc3">
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
<script>
var acc3 = new Fx.Accordion($$('#acc3 dt'), $$('#acc3 dd'));
var container = $('acc3');
acc3.addSection(
new Element('dt',{'class': 'toggle', 'html' : '<b>fourth section</b>'}).inject(container),
new Element('dd',{'class': 'stretcher', 'html' : "I'n the content for the fourth section."}).inject(container)
);
</script>
<hr/>
<p>This example allows you to hide all the sections. You can expose any single section and click its header again to hide it without exposing another one.</p>
<dl id="acc4">
<dl>
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
</dl>
<script>
new Fx.Accordion($$('#acc4 dt'), $$('#acc4 dd'),{
display: -1,
alwaysHide: true
});
</script>
<hr/>
<p>This section initializes with the second section visible rather than the first.</p>
<dl id="acc5">
<dl>
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
</dl>
<script>
new Fx.Accordion($$('#acc5 dt'), $$('#acc5 dd'), {
display: 1
});
</script>
<hr/>
<p>It should set the height property to "<strong>auto</strong>" after the Fx. Note that it should do that on initialization too</p>
<dl id="acc6">
<dl>
<dt class="toggle"><b>first section</b></dt>
<dd class="stretcher">I'm the content for the first section.</dd>
<dt class="toggle"><b>second section</b></dt>
<dd class="stretcher">I'm the content for the second section.</dd>
<dt class="toggle"><b>third section</b></dt>
<dd class="stretcher">I'm the content for the third section.</dd>
</dl>
</dl>
<script>
new Fx.Accordion($$('#acc6 dt'), $$('#acc6 dd'), {
initialDisplayFx: false,
display: 2,
resetHeight: true
});
</script>
Something went wrong with that request. Please try again.