...

View Full Version : jQuery A simple problem: 2 toggles same page?



bhomatude
06-25-2010, 08: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>

karlosio
07-04-2010, 10:38 PM
btnc, btnt, btncdiv and btntdiv? what are these tags doing in the mark up? this is not valid html so jquery wouldn't have a clue what you are looking for.. reference classes or ids or real html tags in your jquery selectors as follows



$('#btnc')
//will find an element in the html with the id attribute btnc eg <div id="btnc">

$('.btnt)
// will find an element in the html with the class attribute btnt eg <div class="btnt">

$('div#btncdiv')
// will find a div element (only) and it has to have an id attribute of btncdiv



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum