mootools accordion no funciona

pablosky13 · #1 (**permalink**) 23/03/2009, 12:06

Colegas!!!.....tengo un problemazo, con este plug-in de mootools, ya que lo baje y es súper entendible como funciona, el tema es que no lo puedo aplicar, ya que tengo mi pagina con varias cosillas (como muchos divs dentro de otros y rollovers para los botones).
Y el CSS que muestra me produce confusión con el mío.

Este fue el html que baje con su script dentro y su CSS
El link aquí http://demos.mootools.net/Accordion

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabbed Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #DFE44F;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;
border: 1px solid #73A405;
}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
</style>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
	var stretchers = document.getElementsByClassName('box');
	var toggles = document.getElementsByClassName('tab');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: false, height: true, duration: 600}
	);
	//hash functions
	var found = false;
	toggles.each(function(h3, i){
		var div = Element.find(h3, 'nextSibling');
			if (window.location.href.indexOf(h3.title) > 0) {
				myAccordion.showThisHideOpen(div);
				found = true;
			}
		});
		if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
</head>
<body>
<div id="wrapper">
	<div id="content">
	<h3 class="tab" title="first"><div class="tabtxt"><a href="#">first</a></div></h3>
	<div class="tab"><h3 class="tabtxt" title="second"><a href="#">second</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="third"><a href="#">third</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="fourth"><a href="#">fourth</a></h3></div>
	<div class="boxholder">
		<div class="box">
			<p><strong>The First Box</strong><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</div>
		<div class="box">
			<p><strong>The Second Box</strong><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu.</p>
		</div>
		<div class="box">
			<p><strong>The Third Box</strong><br />Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui.</p>
		</div>
		<div class="box">
			<p><strong>The Fourth Box</strong><br />Morbi feugiat mauris at velit. Proin rutrum lectus. Proin pulvinar turpis tempor nibh. Cras sit amet magna sed risus tempor vestibulum. Nunc vitae nulla. Vivamus fermentum. Praesent a sem. Cras eu neque ultricies tellus tristique vehicula. Praesent dignissim consequat metus.</p>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>
</body>
</html>

Y así es como tengo mi pagina y como la e ido modificando para usar este plug-in

Código HTML:

body {
	background-color: #2F1F11;
}
#contenedor {
	position:absolute;
	left:50%;
	top:50%;
	width:800px;
	height:500px;
	margin-left: -400px;
	margin-top: -250px;
	z-index:1;
}
#botonera {
	position:absolute;
	left:350px;
	top:70px;
	width:400px;
	height:30px;
	z-index:4;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 10px;
	color: #313131;
}
#info {
	position:absolute;
	left:50px;
	top:120px;
	width:700px;
	height:350px;
	z-index:3;
}
a {
	text-decoration: none;
	color: #313131;
}
a span.con {
	display: none;
	color: #313131;
}
a:hover {
	background: transparent;
	color: #313131;
}
a:hover span.sin {display: none;}
a:hover span.con {display: block; }
-->
</style>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
	var stretchers = document.getElementsByClassName('box');
	var toggles = document.getElementsByClassName('sin');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: false, height: true, duration: 600}
	);
	//hash functions
	var found = false;
	toggles.each(function(sin, i){
		var div = Element.find(sin, 'nextSibling');
			if (window.location.href.indexOf(sin.title) > 0) {
				myAccordion.showThisHideOpen(div);
				found = true;
			}
		});
		if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
</head>

<body>
<div id="contenedor">
  <img src="fondo.jpg" width="800" height="500" />
 <div id="botonera">
  <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100"><div align="center"><a href="#"><span class="sin">boton1</span><span class="con">texto1</span></a></div></td>
      <td width="100"><div align="center"><a href="#"><span class="sin">boton2</span><span class="con">texto2</span></a></div></td>
      <td width="100"><div align="center"><a href="#"><span class="sin">boton3</span><span class="con">texto3</span></a></div></td>
      <td width="100"><div align="center"><a href="#"><span class="sin">boton4</span><span class="con">texto4</span></a></div></td>
    </tr>
  </table>
</div> <!--fin botonera-->

<div id="info">
<div id="wrapper">
	<div id="content">
	<div class="boxholder">
		<div class="box">
			<p><strong>The First Box</strong><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</div>
		<div class="box">
			<p><strong>The Second Box</strong><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu.</p>
		</div>
		<div class="box">
			<p><strong>The Third Box</strong><br />Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui.</p>
		</div>
		<div class="box">
			<p><strong>The Fourth Box</strong><br />Morbi feugiat mauris at velit. Proin rutrum lectus. Proin pulvinar turpis tempor nibh. Cras sit amet magna sed risus tempor vestibulum. Nunc vitae nulla. Vivamus fermentum. Praesent a sem. Cras eu neque ultricies tellus tristique vehicula. Praesent dignissim consequat metus.</p>
		</div>
	</div> <!--fin box holder-->
</div> <!--fin content-->
</div> <!--fin wrapper-->
</div> <!--fin info-->


</div> <!--fin contenedor-->

</body>

ayuda porfavor, muchas gracias