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
Post a Comment