Question

So I know there are multiple questions like this, but I think this is a bit unique… Here is what is my code first of..

<div class="holster_infobox_helper">

        <div id="infobox_holder">
            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/access_point.png">Alerts</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                    <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>

            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/hammer.png">Jobs</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>
        </div>

    </div>

I have a small snippet,

$(".infobox_alert").delay(2500).slideDown(1000);

That makes all of the .infobox_alert

‘s drop down at once. I’d like to have each one from each “infobox” drop down one by one. Starting from the first infobox, one two three, then the next infobox, one two three, then the next. So it opens one by one per box, then onto the next, one by one.

Answer 1

Use recursivity:

slideIt(0);

function slideIt(i){
   var el =$(".infobox_alert:eq("+i+")");
   if(el == undefined) 
       return;
   el.slideDown(1000);
   setTimeout(function(){slideIt(++i)}, 1000);
}

DEMO: http://jsfiddle.net/Yjnny/