JQuery slideToggle function issue/how to -


i'm trying use jquery , slidetoggle() slide down hidden row when particular header clicked. i'm trying 1 jquery statement. know can create id each div tag , have separate function each 'header row' clicked, not have this.

in code example below can first row slidetoggle can't figure out how other slide when 'header row' clicked on.

any appreciated.

<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){     $(this).click(function(){     $("#content").slidetoggle("slow"); /* using toggles first set of data */      }); }); </script> </head> <body> <div>     <!-- row 1 -->     <div id="label">         1st header:     </div>     <div id="content">         data 1         <br />         data 2     </div>      <!-- row 2 -->     <div id="label">         2nd header     </div>     <div id="content">         data 3         <br />         data 4     </div> </div> </body> </html>

demo

<div>     <!-- row 1 -->     <div class="label">         1st header:     </div>     <div class="content">         data 1         <br />         data 2     </div>      <!-- row 2 -->     <div class="label">         2nd header     </div>     <div class="content">         data 3         <br />         data 4     </div> </div>

javascript

$(document).ready(function() {     $(".label").click(function()     {         $(this).next().stop().slidetoggle("slow");      }); });

Comments

Post a Comment