Hello,
Here's what I came with yesterday night and polished this morning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto advance Accordion on page load</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var c=0;
var t;
function start() {
t=setTimeout("loop()",1000);
c=c+1;
}
function loop() {
if (c==5) {
Accordion.openFirstPanel(0);
c=0;
}
else {
c=c+1;
Accordion.openNextPanel();
}
t=setTimeout("loop()",1000);
}
Spry.Utils.addLoadListener(function() {
Spry.$$(".AccordionPanel").forEach(function(n){
Spry.Utils.addEventListener(n, "mouseover", function(){
clearTimeout(t);
}, false);
Spry.Utils.addEventListener(n, "mouseout", function() {
start();
}, false);
});
start();
});
</script>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiquette 1</div>
<div class="AccordionPanelContent">Contenu 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiquette 2</div>
<div class="AccordionPanelContent">Contenu 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiquette 3</div>
<div class="AccordionPanelContent">Contenu 3</div>
</div>
</div>
<script type="text/javascript">
var Accordion = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
It is more or less what Gramps has advised. I also took the liberty to remove the start() action from the BODY tag and added a much more advisable load listener to your document. This way, you can still add other actions when the document has loaded.
Change the timing in the setTimeout() function to suit your needs.
Xav
