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 with the full code. It's a variation of the original for the client.

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 with the full code. It's a variation of the original for the client.

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>.

I want a critique of my solution, and if there is a more refined way to solve it, please show me how you would have done it.

I'm trying to write clear, semantic code as best as I can understand it.

Here is a jsbin with a variation of the code for the client.

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 with the full code. It's a variation of the original for the client.