Toggle - dslreports.com

Author	All Replies
Ashke Flips page and continues reading Premium join:2007-09-11 Saint Paul, MN ·Qwest.net	Toggle I'm having trouble using Toggle with JavaScript. I'm trying to create a button that on each click, it will display the next context (not all of the content). So far, it does not do anything except hide the context as requested. Here is what I have. XHTML File. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Robert Plagge</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- CSS Files --> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="stylesheet" type="text/css" href="css/header.css" /> <link rel="stylesheet" type="text/css" href="css/breadcrumbs.css" /> <!-- JS Files --> <script type="text/javascript" src="JS/jquery-1.3.2.js"></script> <script type="text/javascript" src="JS/header.js"></script> <script type="text/javascript" src="JS/footer.js"></script> <script type="text/javascript" src="JS/games.js"></script> </head> <body> <div id="header"> </div> <div id="breadcrumbs"><a href="index.html">Home</a> <small>>></small> <a href="interests.html">Personal Interests</a> <small>>> </small> Games </div> <div id="leftMenu"> <ul> <li>Games</li> <li><a href="music.html">Music</a></li> <li><a href="books.html">Books</a></li> <li><a href="arts.html">Some Arts</a></li> <li><a href="favorites.html">Favorite Comics</a></li> </ul> </div> <div id="main"> <p id="button">There are a number of games I enjoy playing. Role-Playing Games (RPG), First-Person Shooting (FPS), and some Action games are my fortes.</p> <p><input type="button" value="Show RPG games" /><br /></p> <div class="games"> <p>something</p> </div> <p> </p> <p id="button"><input type="button" value="Show FPS games" /><br /></p> <div class="games"> </div> <p> </p> <p id="button"><input type="button" value="Show Action games" /></p> <div class="games"> </div> </div> <div id="footer"> </div> </body> </html> JavaScript File /Games/ $(document).ready(function(){ $('.games').hide();//Hides all the games function $('#button').toggle( function(){ $(this).next('.games').fadeIn(); }, function(){ $(this).next('.games').fadeOut(); } ); }); Can someone help out? -- -Ashke
	to forum · permalink · · 2009-10-31 10:47:41 ·


Monday, 14-Dec 23:00:14	Terms of Use \| Privacy Policy \| Hosting by www.nac.net - DSL,Hosting & Co-lo \| feedback \| contact over 10 years online! © 1999-2009 dslreports.com. page compression OFF