bhomatude
06-25-2010, 07:48 AM
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 "btnc" and "btncdiv" but when I add "btnt" and "btntdiv": They both call the btncdiv (as does everything else below it!)
check out: http://buddhasuncle.com/jordan
<!DOCTYPE html>
<html>
<head>
<script src="http://buddhasuncle.com/jordan/mootools.js" type="text/javascript"></script>
<script src="http://buddhasuncle.com/jordan/demo.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
<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>
<script>
jQuery(document).ready(function($) {
$("btnc").click(function () {
$("btncdiv").toggle("drop", {direction:"right"}, 500);
});
$("btnt").click(function () {
$("btntdiv").toggle("drop", {direction:"right"}, 500);
});
});
</script>
</script>
<style type="text/css">
btncdiv { font-family: "FuturaExtraBold";font-size:30px;letter-spacing:-2px;display:none; line-height:12px; width:400px; height:600px; position:absolute;right:0px;top:100px;}
btntdiv { font-family: "FuturaExtraBold";font-size:30px;letter-spacing:-2px;display:none; line-height:12px; width:400px; height:600px; position:absolute;right:0px;top:400px;}
</style>
</head>
<body>
<div id="accordion">
<h1 class="toggler"><p style="color:#333;margin-bottom:0px">NAME<br></p><p style="font-size:21px;margin-top:-15px;margin-bottom:-19px;color:#ccc;letter-spacing:-2px;word-spacing:6px;margin-bottom:-7px;">DIRECTOR PRODUCER WRITER BROADCAST FILM</p></h1>
<div class="element">
</div>
<h1 class="toggler">WORK</h1>
<div class="element">
<btnc><h2><a href="#">COMMERCIALS</a></h2></btnc>
<btnt><h2><a href="#">TELEVISION</a></h2></btnt>
<h2><a href="#">FILM</a></h2>
<h2><a href="#">SPRING BREAK 2010</a></h2>
</div>
<h1 class="toggler">FACTS</h1>
<div class="element">
<h2>HOMETOWN:</h2>
<h2>LA + NYC</h2>
<h2>UCLA BA</h2>
<h2>NYU MFA</h2>
<h2>EMMY AWARD WINNER</h2>
</div>
<h1 class="toggler">CONTACT</h1>
<div class="element">
<h2><a href="#">EMAIL</a></h2>
</div>
</div>
<btncdiv>
C CONTENT HERE
</btncdiv>
<btntdiv>
T CONTENT HERE
</btntdiv>
</body>
</html>
check out: http://buddhasuncle.com/jordan
<!DOCTYPE html>
<html>
<head>
<script src="http://buddhasuncle.com/jordan/mootools.js" type="text/javascript"></script>
<script src="http://buddhasuncle.com/jordan/demo.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
<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>
<script>
jQuery(document).ready(function($) {
$("btnc").click(function () {
$("btncdiv").toggle("drop", {direction:"right"}, 500);
});
$("btnt").click(function () {
$("btntdiv").toggle("drop", {direction:"right"}, 500);
});
});
</script>
</script>
<style type="text/css">
btncdiv { font-family: "FuturaExtraBold";font-size:30px;letter-spacing:-2px;display:none; line-height:12px; width:400px; height:600px; position:absolute;right:0px;top:100px;}
btntdiv { font-family: "FuturaExtraBold";font-size:30px;letter-spacing:-2px;display:none; line-height:12px; width:400px; height:600px; position:absolute;right:0px;top:400px;}
</style>
</head>
<body>
<div id="accordion">
<h1 class="toggler"><p style="color:#333;margin-bottom:0px">NAME<br></p><p style="font-size:21px;margin-top:-15px;margin-bottom:-19px;color:#ccc;letter-spacing:-2px;word-spacing:6px;margin-bottom:-7px;">DIRECTOR PRODUCER WRITER BROADCAST FILM</p></h1>
<div class="element">
</div>
<h1 class="toggler">WORK</h1>
<div class="element">
<btnc><h2><a href="#">COMMERCIALS</a></h2></btnc>
<btnt><h2><a href="#">TELEVISION</a></h2></btnt>
<h2><a href="#">FILM</a></h2>
<h2><a href="#">SPRING BREAK 2010</a></h2>
</div>
<h1 class="toggler">FACTS</h1>
<div class="element">
<h2>HOMETOWN:</h2>
<h2>LA + NYC</h2>
<h2>UCLA BA</h2>
<h2>NYU MFA</h2>
<h2>EMMY AWARD WINNER</h2>
</div>
<h1 class="toggler">CONTACT</h1>
<div class="element">
<h2><a href="#">EMAIL</a></h2>
</div>
</div>
<btncdiv>
C CONTENT HERE
</btncdiv>
<btntdiv>
T CONTENT HERE
</btntdiv>
</body>
</html>