Slide specific Fieldset using Jquery -


i have following html 2 fieldsets..i want provide toggleslide functionality fieldsets contains ..if fieldset doesnt contain div tag id "contents" shud not slide. appreciate if can provide fiddler.

the html

<!doctype html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>collapse fieldset when legend element clicked</title>   </head> <body>   <fieldset><legend>awesome</legend>     <div id="contents">     <p>       hello there     </p>     <p>       awesome     </p>     awesome     </div>   </fieldset>   <br>   <fieldset><legend>awesome 2</legend>     <p>       hello there     </p>     <p>       awesome     </p>     awesome   </fieldset>  </body> </html> 

the script

$("fieldset legend").click(function() {    if ($(this).parent().children().length == 2)    $(this).siblings().slidetoggle("slow");   else   {     $(this).parent().wrapinner("<div>");     $(this).appendto($(this).parent().parent());     $(this).parent().find("div").toggle();   } }); 

you can try this:-

i have changed id="contents" class="contents" since id must unique , seems looking have multiple id="contents" make html invalid. if not can use $(this).closest('fieldset').find('#contents').length == 0 in first line of click callback.

demo

$("fieldset legend").click(function () {      if ($(this).closest('fieldset').find('.contents').length == 0) return;     if ($(this).parent().children().length == 2) $(this).siblings().slidetoggle("slow");     else {         $(this).parent().wrapinner("<div>");         $(this).appendto($(this).parent().parent());         $(this).parent().find("div").toggle();     } }); 

html

<fieldset>     <legend>awesome</legend>     <div class="contents">         <p>hello there</p>         <p>awesome</p>awesome</div> </fieldset> <br> <fieldset>     <legend>awesome 2</legend>     <p>hello there</p>     <p>awesome</p>awesome</fieldset> 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -