Ciao
ecco un po' di codice:
codice:
---- CSS ----
a.domanda {display:block}
.visibile {display:block}
----- JS -----
window.addEvent('domready', function(){
var openDiv = 0;
$$('div.risposta').each(function(risp){
risp.setStyle('display','none');
});
$$('a.domanda').each(function(domanda) {
domanda.addEvent('click', function(event){
var selDiv = this.getNext().id;
if(selDiv == openDiv) {
// div already open.. close it
$(selDiv).setStyle('display','none');
openDiv=0;
}
else {
if(openDiv)
$(openDiv).setStyle('display','none');
$(selDiv).set('morph', {
duration: 1000
});
$(selDiv).morph('.visibile');
openDiv=selDiv;
}
return false;
});
});
});
------ HTML --------
<body>
<div id="questions">
Domanda 1.
<div class="risposta" id="r1">Risposta 1.
testo della risposta</div>
Domanda 2.
<div class="risposta" id="r2">Risposta 2.
testo della risposta</div>
</div>
</body>
Il codice è incompleto... ma l'effetto è questo:
se clicco su un "link.domanda" appare un "div.risposta".
Questo lo so fare..
Non riesco invece a fare in modo che la risposta appaia lentamente, come se si srotolasse.
Lo sapevo fare con jQuery ma per esigenze che non sto a spiegarvi devo usare Mootools.
Il modo c'è di sicuro...ma è la prima volta che uso mootools e non so esattamente dove mettere le mani con i tween e i morph.
Aiutino?