Can you help me make my javascript more efficient

[Steven Gardner]

I would love it if someone could have a look at my jquery and help me reduce the lines and make it more efficient.
Thanks

$('.settings').click(function(event){

event.preventDefault();

if($('.settingsbox').hasClass('hidden')){

$('.settingsbox').slideDown(400);

$('.filtersbox').slideUp('fast');

$('.filtersbox').addClass('hidden');

$('.settingsbox').removeClass('hidden');

$('.settings').addClass('settingsactive');

$('.closesettings').slideDown(400);

}else{

$('.settingsbox').slideUp(400);

$('.settingsbox').addClass('hidden');

$('.closesettings').hide(400);

$('.settings').removeClass('settingsactive');

}

});



$('.filters').click(function(event){

event.preventDefault();

if($('.filtersbox').hasClass('hidden')){

$('.filtersbox').slideDown(400);

$('.settingsbox').slideUp('fast');

$('.settingsbox').addClass('hidden');

$('.settings').removeClass('settingsactive');

$('.filtersbox').removeClass('hidden');

$('.filters').addClass('filtersactive');

}else{

$('.filtersbox').slideUp(400);

$('.filtersbox').addClass('hidden');

$('.filters').removeClass('filtersactive');

}

});

$('.closesettings').click(function(event){

event.preventDefault();

$('.settingsbox').slideUp(400);

$('.settingsbox').addClass('hidden');

$('.settings').removeClass('settingsactive');

$('.closesettings').hide(400);

});

$('.closefilters').click(function(event){

event.preventDefault();

$('.filtersbox').slideUp(400);

$('.filtersbox').addClass('hidden');

$('.filters').removeClass('filtersactive');

});

[Taufik Nurrohman]

Hmph. Instead of using the hidden class, I prefer to check on the element visibility:

$('.settings').click(function (event) {

event.preventDefault();

if ($('.settingsbox').is(':hidden')) {

$(this).slideDown(400);

$('.filtersbox').slideUp('fast');

$('.settings').addClass('settingsactive');

$('.closesettings').slideDown(400);

} else {

$(this).slideUp(400);

$('.filtersbox').slideDown('fast');

$('.settings').removeClass('settingsactive');

$('.closesettings').hide(400);

}

});



$('.filters').click(function (event) {

event.preventDefault();

if ($('.filtersbox').is(':hidden')) {

$(this).slideDown(400);

$('.settingsbox').slideUp('fast');

$('.settings').removeClass('settingsactive');

$('.filters').addClass('filtersactive');

} else {

$(this).removeClass('filtersactive');

$('.filtersbox').slideUp(400);

}

});



$('.closesettings').click(function (event) {

event.preventDefault();

$(this).hide(400);

$('.settingsbox').slideUp(400);

$('.settings').removeClass('settingsactive');

});



$('.closefilters').click(function (event) {

event.preventDefault();

$('.filtersbox').slideUp(400);

$('.filters').removeClass('filtersactive');

});

or, with toggle:

$('.settings').toggle(function (event) {

$(this).slideDown(400);

$('.filtersbox').slideUp('fast');

$('.settings').addClass('settingsactive');

$('.closesettings').slideDown(400);

event.preventDefault();

}, function () {

$(this).slideUp(400);

$('.filtersbox').slideDown('fast');

$('.settings').removeClass('settingsactive');

$('.closesettings').hide(400);

});



$('.filters').toggle(function (event) {

$(this).slideDown(400);

$('.settingsbox').slideUp('fast');

$('.settings').removeClass('settingsactive');

$('.filters').addClass('filtersactive');

event.preventDefault();

}, function () {

$(this).removeClass('filtersactive');

$('.filtersbox').slideUp(400);

});

[TheDoc]

I would also set up variables.

var filtersBox = $('.filtersbox'),

settingsBox = $('.settingsbox'),

settings = $('.settings'),

// etc.

Then use them like this:

settingsbox.slideUp('fast');

[Steven Gardner]

Thanks Guys!

I’ve edited my stuff and here’s how it looks.

	/* Set up variables */

var filtersBox = $('.filtersbox'),

settingsBox = $('.settingsbox'),

settings = $('.settings'),

filters = $('.filters'),

closeSettings = $('.closesettings'),

closeFilters = $('.closefilters');



settings.click(function(event){

event.preventDefault();

if(settingsBox.is(':hidden')){

settingsBox.slideDown(400).removeClass('hidden');

filtersBox.slideUp('fast').addClass('hidden');

settings.addClass('settingsactive');

closeSettings.slideDown(400);

}else{

settingsBox.slideUp(400).addClass('hidden');

closeSettings.hide(400);

settings.removeClass('settingsactive');

}

});



filters.click(function(event){

event.preventDefault();

if(filtersBox.is(':hidden')){

filtersBox.slideDown(400).removeClass('hidden');

settingsBox.slideUp('fast').addClass('hidden');

settings.removeClass('settingsactive');

filters.addClass('filtersactive');

}else{

filtersBox.slideUp(400).addClass('hidden');

filters.removeClass('filtersactive');

}

});



closeSettings.click(function(event){

event.preventDefault();

settingsBox.slideUp(400).addClass('hidden');

settings.removeClass('settingsactive');

closeSettings.hide(400);

});



closeFilters.click(function(event){

event.preventDefault();

filtersBox.slideUp(400).addClass('hidden');

filters.removeClass('filtersactive');

});

[Author]

Posts