'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

function generateTask(){ $('#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

<select name="something" id="something"> 
     <option value="football">Football</option> 
     <option value="cricket">Cricket</option> 
     <option value="baseball">Baseball</option> 
</select>
<div id="football" class="content">Football content</div>
<div id="cricket" class="content">Cricket content</div>
<div id="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
});