Da questa pagina:
http://pr0digy.com/sandbox/mootools/slide-effect/
Ho adoperato lo slide verticale per N record, con qualche modifica.
Su FireFox Funziona tutto regolarmente
su IE (
)
funziona solo il primo record e quelli che seguono me li trovo già aperti e non si chiudono, in sostanza applica il tutto solo al primo record...
questo è quanto ho fatto
codice:
<script type="text/javascript">
//<![CDATA[
var Site = {
start: function(){
if($('vertical')) Site.vertical();
},
vertical: function(){
var list = $$('#vertical li div.collapse');
var headings = $$('#vertical li h2');
var collapsibles = new Array();
headings.each( function(heading, i) {
var collapsible = new Fx.Slide(list[i], {
duration: 500,
transition: Fx.Transitions.linear,
});
collapsibles[i] = collapsible;
heading.onclick = function(){
var span = $E('span', heading);
if(span){
var newHTML = span.innerHTML == '[img]./images/piu1.gif[/img]' ? '[img]./images/piu2.gif[/img]' : '[img]./images/piu1.gif[/img]';
span.setHTML(newHTML);
}
collapsible.toggle();
return false;
}
collapsible.hide();
});
},
};
window.addEvent('domready', Site.start);
//]]>
il mio HTML
codice:
<div class="faq">
<ul id="vertical" class="simple">[*]
<h2 class="trigger"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" valign="middle">titolo 1</td>
<td valign="top"><span>[img]./images/piu1.gif[/img]</span></td></tr></table></h2>
<div class="collapse"><div class="collapse-container">
testo descrizione 1</p></div></div>[/list]
<div class="collapse_close"></div>
<ul id="vertical" class="simple">[*]
<h2 class="trigger"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" valign="middle">titolo 2</td>
<td valign="top"><span>[img]./images/piu1.gif[/img]</span></td></tr></table></h2>
<div class="collapse"><div class="collapse-container">
descrizione 2</p></div></div>[/list]
<div class="collapse_close"></div>
<ul id="vertical" class="simple">[*]
<h2 class="trigger"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" valign="middle">TITOLO 3</td>
<td valign="top"><span>[img]./images/piu1.gif[/img]</span></td></tr></table></h2>
<div class="collapse"><div class="collapse-container">
DESCRIZIONE 3</p></div></div>[/list]
<div class="collapse_close"></div>
</div>
Xchè su FF si e invece su IE no ? :-( dove sta il problema?