Accordion-Effekt mit Joomla (1.5)

Da Joomla das Mootools-Framework standardmäßig aktiviert hat, ist es ein leichtes den Accordion-Effekt (in der Demo) einzubinden.
Dazu einfach das folgende Javascript vor dem schließenden body-tag in der index.php des Templates einfügen :

window.addEvent('domready', function(){
new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});

ID`s und Klassen für den Demo-Inhalt sehen so aus:

<div id="accordion">

<h2>What is MooTools?</h2>

<div class="content">
<p>MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.</p>
<p>It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.</p>
</div>

<h2>Cool! What licence does it have?</h2>

<div class="content">
<p>MooTools is released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance.</p>
</div>

<h2>What browsers does it support?</h2>

<div class="content">
<p>MooTools is compatible and fully tested with Safari 3+, Internet Explorer 6+, Firefox 2+ (and browsers based on gecko), Opera 9+, and Chrome 4+.</p>
</div>

</div>

Gestylt ist mit folgendem CSS :

#accordion {
margin: 10px 0 0;
}
#accordion H2 {
background: #6B7B95;
color: white;
cursor: pointer;
font: 12px Helvetica, Arial, sans-serif;
line-height: 16px;
margin: 0 0 4px 0;
padding: 3px 5px 1px;
}
#accordion .content {
background-color: #000000;
}
#accordion .content p {
margin: 0.5em 0;
padding: 0 6px 8px 6px;
}