My slider no works automatic mode

Question

I create simple slider accordion ans it´s my code , ths only problem it´s for works automatic mode , and works

My Code :

<style>

#ac_content
{
    width:900px;
    height:300px;
    margin:auto;
    background-color:#808080;
    overflow:hidden;
}

#ac_cols_float
{
    position:relative;
    float:left;

    line-width:70px;
    height:100%;
    background-color:#000000;
    margin-right:3px;
    cursor:hand;
    cursor:pointer;
}    

#ac_cols_float_infor
{
    position:relative;
    float:left;
    width4544:535px;
    height:100%;
    background-color:#ff0000;
}    

.rot-neg{
    margin-top:40px;
    margin-left:20px;
    font-size:20px;
    color:#FFFFFF;

    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */
}    

#rote
{
    position:absolute;
}
</style>

<script>

var w="900";
var w_col="50";
var n_cols="5";
var margin=3*n_cols;

var result=w_col*n_cols+margin;

var final=w-result;


$(function(){    
    for (i=0;i<=5;i++)
    {       
        $(".ac_"+i+"").css("width",""+w_col);
    }
});

function acordeon(id)
{
    $(function(){
        $(".ac_"+id+"_inf").css("width",""+final);
        $(".ac_"+id+"_inf").show(2000).fadeIn(2000);
        for (i=0;i<5;i++)
        {           
            if (+id==i)
            {

            }
            else
            {
                $(".ac_"+i+"_inf").hide(1000);
            }
        }
    });
}
</script>

<script>

// AUTOMATIC MODE NO WORKS !!!

for (i=0;i<=5;i++)
{    
    setTimeout(function(){
        acordeon(i);
    },1000); 
}

</script>


<div id="ac_content">    
    <div id="ac_cols_float" class="ac_1" onclick="javascript:acordeon(1);"><div class="rot-neg">Web Design .....</div></div>
    <div id="ac_cols_float_infor" class="ac_1_inf" style="display:none;"></div>

    <div id="ac_cols_float" class="ac_2" onclick="javascript:acordeon(2);"></div>
    <div id="ac_cols_float_infor" class="ac_2_inf" style="display:none;"></div>

    <div id="ac_cols_float" class="ac_3" onclick="javascript:acordeon(3);"></div>
    <div id="ac_cols_float_infor" class="ac_3_inf" style="display:none;"></div>

    <div id="ac_cols_float" class="ac_4" onclick="javascript:acordeon(4);"></div>
    <div id="ac_cols_float_infor" class="ac_4_inf" style="display:none;"></div>


    <div id="ac_cols_float" class="ac_5" onclick="javascript:acordeon(5);"></div>
    <div id="ac_cols_float_infor" class="ac_5_inf" style="display:none;"></div>
</div>

The problem it´s where you can see // AUTOMATIC MODE NO WORKS !!! , the other works nice and perfect , Regards and thank´s for your help !

Answer 1

Also seems to have some scope-issues. I would put the acordeon-function inside an object literal (namespace-ish), so that you have more control over it:

Take a look at this fiddle: http://jsfiddle.net/3mfJ2/

What I've changed is basically this:

myfuncs = {
    acordeon: function(id)
        {
            $(function(){
                $(".ac_"+id+"_inf").css("width",""+final);
                $(".ac_"+id+"_inf").show(2000).fadeIn(2000);
                for (i=0;i<5;i++)
                {           
                    if (+id==i)
                    {

                    }
                    else
                    {
                        $(".ac_"+i+"_inf").hide(1000);
                    }
                }
            });
        }
}

Answer 2

Change that automatic for loop to

var starting_slide = 5;
function setSlide(i) {

  acordeon(i);

   if (i > 1) {
      i--;   
      setTimeout( function(){setSlide(i)}, 1000);
    }

   /* 
    //if dont want it to stop
    else {
      setTimeout( function(){setSlide(starting_slide)}, 1000);
   } */
}

​setSlide(starting_slide);​

Because your current for loop doesn't wait and executes those 5 timeouts at the same time.