Jquery toggling each and every div with same id

Answer 1

You shouldn't have more than 1 element with the same ID in a document - use the class attribute instead.

Answer 2

Duplicate ID names are invalid. You should convert them to classes. jQuery will only match the first matching element for ID tags whereas it would return an array of all class matches. You would then do:

$('.body'+id).toggle();

Answer 3

Knowing nothing about jQuery, I believe an ID should be unique and if you have multiple divs with the same ID, you should be using a class.

Answer 4

ID's should be unique. JQuery knows that, so when you're searching for an element with a specific ID, jQuery will only return one element.

from jQuery docs:

#id
Matches a single element with the given id attribute.

http://docs.jquery.com/Selectors/id#id

You should switch the body2010 id to a class attribute.

Answer 5

ID, as you know, stands for 'identifier'. IDs are unique in all contexts.

You should use classes for this type of DOM query.

Answer 6

jQuery will toggle only the first of those elements since ID's are supposed to be unique on a page. You will get a better result if you assign a class name to each of those divs and use that to toggle.

$('.body' + id).toggle('400');

Answer 7

Thanks to all of you for your responses, however, I am still stuck. I tried every suggestion (hopefully applying things correctly), to no avail. Here's the link to the test pages (since I was unable to successfully embed the HTML in my post here).

This example uses class of 'toggle' and all expand/contract:

http://www.flipflopmedia.com/test/ToggleTEST.html

This ex. uses ID of 'toggle'; works but the name needs to be unique:

Sorry, I'm only allowed 1 link. Please reference the page above -the link to this example will be at the bottom of the page.

The image swaps great either way, but the hidden div is the problem.

Thanks again. Sorry if I'm just not getting it!

Tracy