I'm in the process of working on a client's site. I have a section containing a `ul` with list items and a `div` containing the slides that are triggered when clicking on an `li` item.

For instance, `<li id="nav-one">Item One</li>` triggers `<div id="slide-one">...</div>`.

Here is the jQuery portion:

    var slidesNav = $('#slides-nav > li'),
        slidesContent = $('#slides-content').find('div'),
        id = '',
        slideId = '';

    // Set initial state of slides to hidden, except the first one.
    slidesContent.hide().first().slideDown();

    var setClickEvents = function (id) {

        $('#nav-' + id).on('click', function () {
            slideId = $('#slide-' + id);

            if (slideId.css('display') !== 'block') {
                slidesContent.slideUp();
                slideId.slideDown();
            }
        });
    };

    for (var i = 0; i < slidesNav.length; i++) {
        id = $(slidesNav[i]).attr('id').substr('4');

        // assign click events
        setClickEvents(id);
    }

If my solution can be improved, please explain as my ultimate goal is to become a better programmer.

Here is a [jsbin][1] with the full code. It's a variation of the original for the client.


  [1]: /edit?js,output