Question

I am using a show hide slider which works for the slide down but doesn’t respond for the slide up, can anyone explain where Im going wrong with this:

var moreServicesList = $('#more-services-list').hide();

$('#more-services').on('click', function(e) {
    var flag = 0;
    if( flag === 0) {
        flag = 1;
        moreServicesList.slideDown('slow');
        $(this).html('Hide');
    } else {
        moreServicesList.slideUp('slow');
        $(this).html('Show');
        flag = 0;       
    }
    e.preventDefault();
}); 

Thanks in advance
Kyle

Answer 1

You have to move var flag = 0; outside of the event listener – http://jsfiddle.net/Nnhz8/

var moreServicesList = $('#more-services-list');
var flag = 0;

$('#more-services').on('click', function(e) {

    if( flag == 0) {
        moreServicesList.slideDown('slow');
        flag = 1;
        $(this).html('Hide');
    } else {
        moreServicesList.slideUp('slow');
        $(this).html('Show');
        flag = 0;       
    }
    e.preventDefault();
});