'fadetoggle' Multiple Div Tags Via Drop Down Menu

I need to be able to hide/show multiple div tags on the same page via a drop down menu, but I want them to use the jQuery 'fadeToggle'. I can easily do this without 'fadeToggle' by

Solution 1:

You can try this

functiongenerateTask(){ $('#football, #football2').toggle();}

Or yan can add classes on every elements that should be affected by your dropdown: For example:

<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>

And than target every element that's in link with your dropdown action.

Solution 2:

If you can keep the value of the options as the ids of the divs then it will be much simpler. Something like this

Markup

<selectname="something"id="something"><optionvalue="football">Football</option><optionvalue="cricket">Cricket</option><optionvalue="baseball">Baseball</option></select><divid="football"class="content">Football content</div><divid="cricket"class="content">Cricket content</div><divid="baseball"class="content">Baseball content</div>

JS

$("#something").change(function(){
    var id = "#"+this.value;
    //This will hide all the divs with class content but not the selected option
    $(".content").filter(":not("+id+")").hide();
    $(id).fadeToggle();//This will toggle div based on the selected option
});