Hi guys, I am trying to develop a small simple accordion withuot plug in (I know there are jquery plug ins but I would like to do my own) but I am having some troubles. There must be an error in the code because firebug comes back with this message: $ is not defined [Break On This Error] $(document).ready(function(){ as jquery I am using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> Here's the code I came up with; HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script type = "text/javascript" src = "script.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <div id = "accordion"> <ul id = "main_list"> <li><a href = "#" class = "header">Today</a> <ul> <li>apples</li> <li>pears</li> <li>banabas</li> </ul> </li> <li><a href = "#" class = "header">Yesterday</a> <ul> <li>fish</li> <li>pork</li> <li>beef</li> </ul> </li> <li><a href = "#" class = "header">Day before yesterday</a> <ul> <li>beans</li> <li>peas</li> <li>lettuce </li> </ul> </li> </ul> </div> </body> </html> CSS #accordion { border:1px solid red; width:500px; height:500px; margin:0 auto; } #main_list { border:3px solid blue; } ul#main_list, #main_list ul { list-style:none; } #main_list li a { text-decoration:none; color:black; font-size:150%; } #main_list li a:hover { background-color:red; } #main_list > li > ul > li { display:none; } JQUERY $(document).ready(function(){ $("ul#main_list a.header").click(function(){ $(this).children("ul").slideToggle(); }); }); and here' a preview http://antobbo.webspace.virginmedia.com/various_tests/accordion/test.htm Now, I know many of you will say that there are better ways to do that, but because I am a beginner I came up with this way to do it, and I wonder whether there is any silly error I am making that is preventing the script from working any help is much appreciated thanks
Just use an example someone else already made. It's very basic and there's no sense in trying to reinvent the wheel. I look at it this way... if you have to go to a forum to seek someone elses help on your code you are better off looking at code written by someone else that already works. Especially if the final result is so basic it will almost be the same code.
"Without plugin" and you're using jquery? Huh? Not even following the logic behind that. Though is that jquery code in script.js -- if so you have to load that AFTER jquery! Basically in your HEAD you've got script.js and jquery.js backwards on their load order. change: <script type = "text/javascript" src = "script.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> To: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type = "text/javascript" src = "script.js"></script> When you're using the stupid pointless fat bloated libraries that add animooted **** that has no business on a website in the first place, you have to load that library BEFORE you can use it's functionality... and since $ is added by jquery and is NOT part of the javascript specification... You may want to try out my old accordion script I was using before I woke up and smelled the coffee on the subject. http://battletech.hopto.org/html_tutorials/accordion/ Even with full comments it's 7k of code (around 3.8k comment stripped), and doesn't need any of that idiotic jquery BS. NOT that such things really belong on a website in the first place given how they typically piss all over accessibility.
Jquery is NOT idiotic BS.... The purpose behind JQuery is to do more by writing less. It's built to be a cross platform JavaScript framework that includes stable functions that perform in all popular browsers. Without JQuery or a similar framework you may just find yourself poorly reinventing the wheel...over and over and over again.
Yes, it is. It's a fat bloated framework that by itself is more than two-thirds the code I'd allow on a normal website for HTML+CSS+IMAGES+SCRIPTS!!! ... and for what? Stupid animated crap that doesn't belong on websites in the first place, pissing on accessibility by abusing AJAX as if it were the new framesets, and for anything useful resulting in as large if not LARGER code. Because cryptic + larger code == more efficient. Type of idiocy that leads to the development of programming languages like RUST. You know Rust, right? The programming language for people who think C++ is a bit too verbose and clear? (which is akin to saying the Puritans who settled Boston in 1630 left England because the CoE was a bit too warm and fuzzy for their tastes) Which I have not seen out of anything 'useful' done with it... and even if it were it sure as shine-ola isn't clearer code. But I'm a Wirth kinda-guy... I'd sooner hand compile 8k of Z80 machine language than try to debug fifty lines of C code; and jquery makes C look verbose. That aren't stable to opera users, destroys battery time on modern handhelds, and 90% of which is stupid animooted rubbish that has zero business on a website in the first place and does little more than make sites HARDER to use. (There's a reason 'noscript' plugins for browsers are popular -- how do you think I'm using this site right now? Sure as **** isn't thanks to the idiotic javascript bloat!) I hear that time and time again about it, and to be frank -- it's bull. Besides, those who learn only what others have learn nothing at all. It is a fat bloated dumbass library in an INTERPRETED language -- apparently the lessons of Cobol have been long forgotten in that regard... It's so stupid I've begun to wonder if people are charging clients by the K-LoC again, because at BEST it's a sleazy shortcut, at worst it's taking websites that were useful and destroying that usefulness. See webmail, with the major sites like hotmail, yahoo and gmail being less useful than squirrelmail was a decade ago... thanks to idiotic bloated javascript for nothing... and you want idiotic bloated javascript for nothing, you don't have to look much further than the idiotic bloated "frameworks" leading the charge. Well, that and this dumbass paranoia about pageloads. MAYBE if people stopped vomiting up code to content ratios of 10:1 and bothered to practice separation of presentation from content and actually leveraged caching models, they wouldn't need to do stupid things like strip out whitespace, throw endless hardware upgrades at sites that could be handled by a single core 1.6ghz atom processors, or worst of all, the most idiotic BS choice there is -- throwing more code at a slow site as if that will magically cure all their woes. If anyone out there doesn't realize just how stupid that last one is -- do the world a favor, back the **** away from the keyboard, and take up something less dangerous like macramé. I have nothing but contempt for javascript or CSS frameworks, and the developers DUMB ENOUGH to see merit in their use. It is most always MORE work in the long run, often defeats the entire point of using the underlying technologies, destroys any chance at accessibility, destroys the user experience, and makes the sites painfully slow to use much less *SHOCK* maintain. As Mr. Scott said, the more they overtake the plumbing, the easier it is to stop up the drain.
While it has support for animation it's not centered around it. It's just a feature. I use Jquery for cross browser ajax support, altering the DOM, and a countless amount of other things. I'm not going to compare a 17KB javascript library to the C language. Destroys battery time on modern handhelds? I suppose that would depend on what you do with the code. Now you're going off track and just rambling. More irrelevant rambling. Irrelevant and completely off topic. I believe it enhances the users experience. And from every script I wrote using Jquery I never had an issue with cross browser support and usually my code takes up just a few lines which would of been very lengthy if it wasn't for the library. Like I said before... I can tell you have a programming background. I can also tell you are probably old school. Old School Programmers still believe colors are pointless on web pages. They believe the internet shouldn't progress and all web pages should just be a mix of bullets, headings, and paragraphs in one standard font. But it's time to wake up and adjust to the times then move out of your parents basement.