单击新的h3后隐藏先前打开的p标签

Question

I made this show hide example where when i click on h3 then description that is p tag will be show but here i'm getting problem. I want to hide previous p which opened after click on new h3 . Any solution for it? I'm not getting it. Please help.

 $("h3").click(function(){ $(this).next("p").toggle("slow"); }); 

 p{display:none;} .f,.s{float:left;margin:10px} h2{margin:0px} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="f"> <h2> Web Development </h2> <ul> <li><h3> edfdfs </h3> <p> jkksfhskhsdf hf dh dhffsdh hfdd s </p> </li> <li><h3> fsfsf sd </h3> <p> jhjsdhfsjkf hdsjfhh dh shds khsdk sd </p></li> <li><h3> dfsdfdfs </h3> <p> kdhs hkdhj djh sdh sdkh </p></li> <li><h3> dcsdcs </h3> <p> kjsdjjskd </p></li> </ul> </div> <div class="s"> <h2> Web Development </h2> <ul> <li><h3> edfdfs </h3> <p> jkksfhskhsdf hf dh dhffsdh hfdd s </p> </li> <li><h3> fsfsf sd </h3> <p> jhjsdhfsjkf hdsjfhh dh shds khsdk sd </p></li> <li><h3> dfsdfdfs </h3> <p> kdhs hkdhj djh sdh sdkh </p></li> <li><h3> dcsdcs </h3> <p> kjsdjjskd </p></li> </ul> </div> <div class="t"> <h2> Web Development </h2> <ul> <li><h3> edfdfs </h3> <p> jkksfhskhsdf hf dh dhffsdh hfdd s </p> </li> <li><h3> fsfsf sd </h3> <p> jhjsdhfsjkf hdsjfhh dh shds khsdk sd </p></li> <li><h3> dfsdfdfs </h3> <p> kdhs hkdhj djh sdh sdkh </p></li> <li><h3> dcsdcs </h3> <p> kjsdjjskd </p></li> </ul> </div> 

Answer 1

While you use toggle you simply need to hide other p but not the next p

$("h3").click(function(){
    $('.f p').not($(this).next("p")).hide();
    $(this).next("p").toggle("slow");
});

Demo 1 if you need to hide the other p inside each parent div

 $("h3").click(function(){ $(this).closest('.containDiv').find('p').not($(this).next("p")).slideUp(); $(this).next("p").slideToggle(); }); 

 p{display:none;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="f containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div> <div class="s containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div> <div class="t containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div> 

Demo 2 if you need to hide all p inside all divs

 $("h3").click(function(){ $('.containDiv').find('p').not($(this).next("p")).slideUp(); $(this).next("p").slideToggle(); }); 

 p{display:none;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="f containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div> <div class="s containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div> <div class="t containDiv"> <h2>Web Development</h2> <ul> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> <li> <h3>edfdfs</h3> <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p> </li> </ul> </div>