slideUp/slideDown problem
In this link,
http://jsfiddle.net/8ws2H/1/, the panels work like they're supposed to. However when I copy the code to a new HTML page and save it, it doesn't work (nothing happens when clicking the panels). Including my code here, what have I done wrong since it won't work?
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(".flip").click(function () { $(".panel").slideUp(); $(this).next().slideDown(); }); </script> <style type="text/css"> .panel, .flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } .panel { padding:50px; display:none; } .container {margin-bottom:5px} </style> </head> <body> <div class="container"> <div class="flip">Click to slide the panel down or up</div> <div class="panel">Hello world!</div> </div> <div class="container"> <div class="flip">Click to slide the panel down or up</div> <div class="panel">Hello world!</div> </div> <div class="container"> <div class="flip">Click to slide the panel down or up</div> <div class="panel">Hello world!</div> </div> </body> </html>