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

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>
<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">
<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>
jQuery(document).ready(function($) {
$("btnc").click(function () {
$("btncdiv").toggle("drop", {direction:"right"}, 500);
$("btnt").click(function () {
$("btntdiv").toggle("drop", {direction:"right"}, 500);
<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;}
<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">
<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>
<h1 class="toggler">FACTS</h1>
<div class="element">
<h2>LA + NYC</h2>
<h2>UCLA BA</h2>
<h2>NYU MFA</h2>
<h1 class="toggler">CONTACT</h1>
<div class="element">
<h2><a href="#">EMAIL</a></h2>



07-04-2010, 09: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

//will find an element in the html with the id attribute btnc eg <div id="btnc">

// will find an element in the html with the class attribute btnt eg <div class="btnt">

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