Jquery Show/hide Feature Broken From Ul

I'm trying to hide my divs which will have content in them when finished. I have a jsFiddle file and some of the coding is not complete, just wrote it very fast to give you an idea

Solution 1:

The html in your fiddle is invalid: you should not assign the same id attribute to multiple elements. If you try to do something like $("#slidingDiv").hide(); it will only select the first (in most browsers) element with that id to hide.

Also you are using the ".show_hide" class selector but none of your elements have that class.

Within your click handler you've said $(this).next("#slidingDiv").slideToggle(); but the .next() method doesn't go looking for the next element that has the supplied id, it selects only the immediately following element if that element has the supplied id.

Also you've used jsfiddle incorrectly: within the JavaScript window you are supposed to put JavaScript code, not <script> tags. You should remove the <script> tags and instead select the required library from the panel on the left, like this: http://jsfiddle.net/vCZC7/1/ (Your fiddle had the default Mootools library selected on the left.)

I found your explanation of the required behaviour somewhat lacking, but here is a working fiddle where clicking the li elements toggles the divs underneath: http://jsfiddle.net/vCZC7/3/ (note: I updated it to use the latest jQuery because the simplest thing seemed to be to use the .index() method syntax introduced in version 1.4 and you had only included 1.3.2).