Make li item boxes pop out in order jQuery

Question

I have a footer list:

<footer id="footer">
    <ul>
        <li>
            <h2> x </h2>
            <h3> xx  </h3>
            <p>xxx</p>
            <p> xxxx </p>
        </li>
        <li>
            <h2> x  </h2>
            <h3> xx </h3>
            <p>xx </p>
            <p> xx </p>
        </li>
        <li>
            <h2> x </h2>
            <h3> xx </h3>
            <p>xx</p>
            <p> xxx</p>
        </li>
    </ul>
</footer>

that pops out on click to two separate links, like so:

$(document).ready(function() {
    $( "#add" ).click(function() {
        $( "#footer" ).toggle( "fast" );
    });
});

$(document).ready(function() {
    $( "ul li:eq(3)" ).click(function() {
        $( "#footer" ).toggle( "fast" );
    });
});

I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.

edit: the two links that pop out the footer are here, the contact link and the phone image:

        <section id="side">
            <nav class="sidebar"><img class="logo" src="images/logo.png"></img>
                <ul>
                    <li> <a href="#"> About </a></li>
                    <li> <a href="docs.html"> Providers </a></li>
                    <li> <a href="#"> Quality </a> </li>
                    <li> <a href="#"> Contact </a> </li>
                </ul>
                <img id="add" src="images/phoner.png"></img>
            </nav>
        </section>

Answer 1

I think you want to click on each one and then show the next one, is that right? Then you can use the .next() jquery property to assign the click listener to toggle the next element.

$(document).ready(function() {
    //start with all LI hidden
    $('#footer').find('li').hide();
    //add click listener to the id='add' element to toggle the first LI
    $( "#add" ).click(function() {
            //if none are visible, show the first one, else hide them all
            if ($('#footer').find('li').first().css('display') == 'none' ) {
                //show the fist LI
                $( "#footer" ).find('li').first().toggle( "fast" );
            } else {
                //hide them all
                $('#footer').find('li').hide();
            }
        });
    //add listener to each LI to toggle the NEXT one
    $('#footer').find('li').click(function(){
        $(this).next().toggle("fast");
    });
});

... after your comment...

OR You can show the FIRST hidden one on each click like this:

$(document).ready(function() {
    //start with all LI hidden
    $('#footer').find('li').hide();
    //add click listener to the id='add' element to toggle the first LI
    $( "#add" ).click(
        function() {
            //if NO LI are hidden, hide them all, else show one at a time
            if ( $('#footer').find('li:hidden').size()==0 ) {
                //hide them all
                $('#footer').find('li').hide();     
            } else {
                //show the first hidden LI
                $('#footer').find('li:hidden').first().show('fast');
            }
        }
    );
});

Is that what you're looking for?

Answer 2

Something like this maybe?

$(document).ready(function() {
    var $footer = $("#footer").hide(),
        $footerItems = $footer.find("ul li").hide(),
        footerState = 0;
    $("#add, .sidebar ul li").click(function (e) {
        e.preventDefault();
        footerState = !footerState;
        var method = footerState ? 'show' : 'hide';
        if(footerState) $footer.show();
        $footerItems.get().reduce(function (p, li) {
            return p.then(function() {
                return $(li)[method]('slow').promise();
            });
        }, $.when()).then(function() {
            if(!footerState) $footer.hide();
        });
    });
});

DEMO

Answer 3

https://jsfiddle.net/m173gxvg/3/

Something like this? If yes, here are the modifications:

Remove the display:none from the footer css Add the display:none to the footer ul li css Modify the javascript code

Here's the js to use after the click:

toggleTimer=500;
    $( "#footer" ).find("ul").find("li").each(function() { 
        jQuery(this).toggle(toggleTimer);
        toggleTimer=toggleTimer+500;
    });