Hidden Div Slidedown OVER visible div

Question

I have 1 visible div at the top of the page and 8 hidden divs following in the code.

I want an onClick event within that visible div to make the subsequent div become visible and "slidedown" from the top of the page OVER the last div. Like a slideshow.

So far, my code just pushes the old div down rather than replace it.

    <script src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#n2').hide();
        $('#n1A').click(function () {
            var state = $('#n2').is(':visible');
            $('#n2')[state?'hide':'slideToggle'](state ? 0 :'slow');
        });
    });
    </script>

HTML

    <div id="n1">
    <a href="#" id="n1A">...</a>
    </div>

    <div id="n2">
    <a href="#" id="n2A">...</a>
    </div>

    (and so on.  for 8 divs)

1. How can I make each div drop down OVER the previous div?
2. Do I need separate script code for all 8 div ids or can variables simplify this?
3. How can I add "easeOutBounce" to the animation?

Thanks for your help.

Answer 1

Here is an example that should get you started well. I just positioned them absolutely to make it so they can stack on each other. There are a few different ways of doing that though.

Using classes makes it so that you don't have to write js for each individual element.

JSFiddle

Example DOM:

<div id="n1" class="slide"> <a href="#" id="n1A">...1</a>

</div>
<div id="n2" class="slide"> <a href="#" id="n2A">...2</a>

</div>
<div id="n3" class="slide"> <a href="#" id="n3A">...3</a>

</div>
<div id="n4" class="slide"> <a href="#" id="n4A">...4</a>

Example javascript:

$(document).ready(function () {
    $('.slide').not("#n1").hide();
    $('.slide').click(function () {
        var $this = $(this);
        var $next = $this.next();
        if (!$next.length) {
            $next = $this.siblings(".slide").first();
        }
        $this.css("z-index","-1"); //make sure $next can slide OVER $this
        $next.slideDown("slow", function () {
            $this.hide().css("z-index","0");
        });
    });
});

for changing the animation type (easeOutBounce), you'll probably have to use jQueryUI - http://api.jqueryui.com/easings/