Si quieres implementar algo rapido de moo.fx, sugiero lean la documentacion para poder dominar el script.
<script type="text/javascript" src="/moo.fx/prototype.lite.js"></script>
<script type="text/javascript" src="/moo.fx/moo.fx.js"></script>
<script type="text/javascript" src="/moo.fx/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var toggles = document.getElementsByClassName('head_acordion');
var stretchers = document.getElementsByClassName('body_acordion');
var myAccordion = new fx.Accordion(toggles, stretchers);
}
</script>
<div>
<div>
<div>
<div class="head_acordion"><a href="javascript:;">titulo</a></div>
<div class="body_acordion">
<p>contenido</p>
</div>
<div class="head_acordion"><a href="javascript:;">titulo</a></div>
<div class="body_acordion">
<p>contenido</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
Ahora si quieren que el primer panel se abre predeterminadamente hay que agregar este codigo
function checkHash(){
var found = false;
toggles.each(function(h3, i){
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(stretchers[i]);
found = true;
}
});
return found;
}
if (!checkHash()) myAccordion.showThisHideOpen(stretchers[0]);
Para que quede al final asi:
<script type="text/javascript" src="/moo.fx/prototype.lite.js"></script>
<script type="text/javascript" src="/moo.fx/moo.fx.js"></script>
<script type="text/javascript" src="/moo.fx/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var toggles = document.getElementsByClassName('head_acordion');
var stretchers = document.getElementsByClassName('body_acordion');
var myAccordion = new fx.Accordion(toggles, stretchers);
function checkHash(){
var found = false;
toggles.each(function(h3, i){
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(stretchers[i]);
found = true;
}
});
return found;
}
if (!checkHash()) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
<div>
<div>
<div>
<div class="head_acordion"><a href="javascript:;">titulo</a></div>
<div class="body_acordion">
<p>contenido</p>
</div>
<div class="head_acordion"><a href="javascript:;">titulo</a></div>
<div class="body_acordion">
<p>contenido</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
init();
</script>