how to make this better function and less code.

[Attila Hajzer]

http://jsfiddle.net/attilahajzer/dRqjK/

how do i make this function better without looking so jittery and glitchy and with possibly less code… (without the use of a plugin or an external function.

[timmey]

for less code maybe something like this:

var value = $(this).val();

if( value == 'all') {//check which radio button is clicked

$(".box").fadeIn('slow');

} else if(value == 'red') {

$(".red").fadeIn('slow').siblings('.green, .yellow, .blue').hide();

} else if(value == 'green') {

$(".green").fadeIn('slow').siblings('.red, .yellow, .blue').hide();

}else if(value == 'blue') {

$(".blue").fadeIn('slow').siblings('.green, .yellow, .red').hide();

}else if(value == 'yellow') {

$(".yellow").fadeIn('slow').siblings('.green, .red, .blue').hide();

}

im no expert though.. :)

[Mottie]

Try this (updated demo)

$(document).ready(function() {

// attack a click event on all radio buttons with name 'category'

$("input[name=category]").click(function() {

var sel = $(this).val();

$('.' + sel).fadeIn('slow');

if (sel !== 'box') { $('.box:not(.' + sel + ')').fadeOut('fast'); }

});

});

I changed the radio selection value for all from “all” to “box” to match the class name of all the boxes – it just made coding easier ;)

Oh and I removed the “:radio” from the input selector… I think it’s going away in a future version of jQuery, so might as well get rid of it now.

[Mottie]

*shrug* I’m the red-headed step-child with a side of chopped liver!

[Mottie]

Wow, it feels weird being completely ignored… I had it working with the fadeOut eight posts ago… but hey, I guess I’m glad you got it working… and you’re welcome.

[TheDoc]

Mottie this has been hilarious to follow.

[standuncan]

+1

[Mottie]

LOL thanks guys… wait, how am I hilarious? o.O

[standuncan]

More-so it’s the situation I’d say.

[Author]

Posts