#1 [JAVASCRIPT] elementos colapsables con mootools?
hola a todos!
estoy usando mootools y lo que quiero hacer es que la lista secondary permanezca oculta hasta que se haga click en el link more y que al mismo link se le agregue la clase less
hasta ahora logre esconder la lista secondary y se que para agregar la clase al link tengo que usar toggleClass, pero no logro hacer que se muestre la lista secondary al hacer click en el link...
esto es lo poco que pude hacer de javascript
y esta es la estructura de mi pagina, en realidad son mas bloques, pero para pruebas con dos esta bien 
espero que puedan ayudarme, gracias!
estoy usando mootools y lo que quiero hacer es que la lista secondary permanezca oculta hasta que se haga click en el link more y que al mismo link se le agregue la clase less
hasta ahora logre esconder la lista secondary y se que para agregar la clase al link tengo que usar toggleClass, pero no logro hacer que se muestre la lista secondary al hacer click en el link...
esto es lo poco que pude hacer de javascript
Código:
<script type="text/javascript">
window.addEvent('load', function() {
var anterior = false;
$$('.item .secondary').each(function(elemento) {
var efecto = new Fx.Slide(elemento, {transition: Fx.Transitions.Back.easeOut, wait: false});
efecto.hide();
elemento.efecto = efecto;
});
$$('.enlaces a').each(function(elemento) {
elemento.addEvent('click', function() {
var id = elemento.getElements('a.more');
$(id).efecto.toggle();
$(elemento).toggleClass('less');
});
});
});
</script>
Código:
<div id="container">
<div id="content" class="clearfix">
<div id="ac457fe5aeb61805eb7fa5b063d0f659d88db3980" class="item">
<h2><a href="#">Authentic Boredom</a></h2>
<ul class="item-list">
<li class=""><a href="#" class="link">Extensible CSS Interface IV: Testing for Extensibility</a></li>
<li class=""><a href="#" class="link">Extensible CSS Interface III: Adding Ajax Interactivity</a></li>
<li class=""><a href="#" class="link">Mobileness</a></li>
<li class=""><a href="#" class="link">A plug for New Orleans</a></li>
<li class=""><a href="#" class="link">A plug for New Orleans</a></li>
<li class=""><a href="#" class="link">Extensible CSS Interface II: CSS Selectors &amp; jQuery</a></li>
<li class=""><a href="#" class="link">Designer, Coder: Separate roles or one?</a></li>
<li class=""><a href="#" class="link">Extensible CSS Interface I: The Foundation</a></li>
</ul>
<ul class="secondary">
<li class=""><a href="#">Sans iPhone for a week</a></li>
<li class=""><a href="#">GTD with Netvibes</a></li>
<li class=""><a href="#">Recent job listings</a></li>
<li class=""><a href="#">Randomness, round 2</a></li>
<li class=""><a href="#">Randomness</a></li>
</ul>
<a href="#" id="uno" class="more">Uno</a>
</div>
<div id="a4eaeafc22a27f2566aa9c6281c86210e5fb637ab" class="item">
<h2><a href="#">WordPress Planet</a></h2>
<ul class="item-list">
<li class=""><a href="#" class="link">Weblog Tools Collection: Introducing Weblog Tools Videos</a></li>
<li class=""><a href="#" class="link">Ryan Boren: New admin UI on WordPress.com, 2.5.1, and 2.6</a></li>
<li class=""><a href="#" class="link">Weblog Tools Collection: Ultimate Guide to the WordPress Loop</a></li>
<li class=""><a href="#" class="link">Matt: WP Meetup in Philadelphia</a></li>
<li class=""><a href="#" class="link">Weblog Tools Collection: Organizing A WordCamp Part 1</a></li>
<li class=""><a href="#" class="link">Matt: New bbPress</a></li>
<li class=""><a href="#" class="link">Donncha: Slow down trackback spam with Simple Trackback Validation</a></li>
<li class=""><a href="#" class="link">bbPress: bbPress 0.9 released</a></li>
</ul>
<ul class="secondary">
<li class=""><a href="#">Dougal Campbell: Atlanta PHP</a></li>
<li class=""><a href="#">Matt: OpenID and Spam</a></li>
<li class=""><a href="#">Weblog Tools Collection: WordPress Plugin releases for 4/1</a></li>
<li class=""><a href="#">Mark Jaquith: Mike Industries switches to WordPress</a></li>
<li class=""><a href="#">Weblog Tools Collection: FAQ on WordPress 2.5</a></li>
</ul>
<a href="#" id="dos" class="more">Expandir</a>
</div>
</div>
</div>
0
