Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A simple problem: 2 toggles same 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 "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

    Code:
    <!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>
    Last edited by bhomatude; 06-25-2010 at 11:05 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts
    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

    Code:
    $('#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
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •