Setting up multiple toggles on one page
Am I missing something here? I want to be able to have more than just one button to toggle the drop function with different content. I'm using the test code below to set this up. Works fine if just using "btn" and "btndiv" but nothing happens when I add "btn2" and "btn2div":
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
<style type="text/css">
btndiv { display:none; margin:0px; width:400px; height:600px; position:absolute;right:0px;top:100px;}
btn2div { display:none; margin:0px; width:400px; height:600px; position:absolute;right:0px;top:400px;}
body {overflow:hidden;}
</style>
<script>
$(document).ready(function() {
$("btn").click(function () {
$("btndiv").toggle("drop", {direction:"right"}, 500);
});
$("btn2").click(function () {
$("btn2div").toggle("drop", {direction:"right"}, 500);
});
});
</script>
</head>
<body>
<btn style="cursor:pointer">Click me</btn>
<btn2 style="cursor:pointer">Click me 2</btn>
<btndiv>what happens in here, stays in here.</btndiv>
<btn2div>what happens in here, stays in here.</btn2div>
</body>
</html>