Add jQuery menu a fadeIn and fadeOut -

i thinking in making simple menu jquery: clicking in menu's items , div containing information shows up. want add fadein , fadeout of showing div don't know how achieve this.

this code using

html:

<div id="wrap"> <ul id="divtoggle">     <li><a id="togglediv1" href="#">show div 1</a></li>     <li><a id="togglediv2" href="#">show div 2</a></li>     <li><a id="togglediv3" href="#">show div 3</a></li> </ul> <div id="div1">     <p>this content inside first container</p> </div> <div id="div2">         <p>this content inside second container</p> </div> <div id="div3">         <p>this content inside third container</p> </div> </div> 

jquery:

$("#divtoggle").delegate("a", "click", function(e) {     var toggled = ($(this).prop("id"));     $("div#wrap").prop("class", toggled); }); 

css:

#div1, #div2, #div3 {  display:none;    } .togglediv1 #div1, .togglediv2 #div2, .togglediv3 #div3{  display:block;    } 

code

you try (without using css classes):

markup:

<div id="wrap">     <ul id="divtoggle">         <li><a id="togglediv1" href="#div1">show div 1</a></li>         <li><a id="togglediv2" href="#div2">show div 2</a></li>         <li><a id="togglediv3" href="#div3">show div 3</a></li>     </ul>    <div id="content">         <div id="div1">             <p>this content inside first container</p>         </div>         <div id="div2">             <p>this content inside second container</p>         </div>         <div id="div3">             <p>this content inside third container</p>         </div>     </div> </div> 

jquery:

$("#divtoggle").delegate("a", "click", function(e) {     var id = ($(this).attr("href"));     $("#content div").hide("slow");     $(id).toggle("slow"); }); 

or using fadeout, fadein , fadetoggle effects:

$("#divtoggle").delegate("a", "click", function(e) {     var id = ($(this).attr("href"));     $("#content div").fadeout("slow");     $(id).fadetoggle("slow"); }); 

http://jsfiddle.net/hescano/6rsvf/256/