JQuery Toggle Show/Hide w/Multiple DIV ID's?

Since you didn't provide any HTML to work from, I put some together with script that works.

Since you didn't provide any HTML to work from, I put some together with script that works HTML Header Text 1 This is some hidden text #1 Header Text 2 This is some hidden text #2 Script (updated to work with your HTML) $(document). Ready(function(){ $('. Toggle').hide(); $('.

Show'). Click(function(){ var t = $(this); // toggle hidden div t.next().next(). Toggle('slow', function(){ // determine which image to use if hidden div is hidden after the toggling is done var imgsrc = ($(this).

Is(':hidden'))? 'images/checkmark1. Jpg' : 'images/checkmark2.

Jpg'; // update image src t. Attr('src', imgsrc ); }); }) }).

Copied this completely and I get the exact same result as I already have. They all expand/contract when clicking on a single image. – flipflopmedia Jan 18 '10 at 12:34 I don't know what's different about what you are doing, but I posted a demo of my script here (pastebin.Me/7c6962d7e70c49f97237cd465e26fb09) for you to see that it does work.

– fudgey Jan 18 '10 at 18:38 I updated my script to work with the HTML you provided. Basically, I made it work without a div wrapping each block. – fudgey Jan 19 '10 at 12:06 That's flippin' it!

Your dang demo works! Unflippin' believable! Ok, I have got to implement this with my own images and text.

Thank you, Thank you, Thank you, Thank you! A thousand times! The images change when clicked upon AND it only fires it's related div; if that makes sense, it's beautiful.

I have been trying to figure this out for 4 solid days now! – flipflopmedia Jan 19 '10 at 12:24 I think you're using jQuery 1.3.1, and I, 1.2.3. Still works, but should I use the pack you are using?

It's perfect, worked like a charm! :) Thank You! Problem Solved!

Next? LOL! Now I can get on with the rest of my life!

:) – flipflopmedia Jan 19 '10 at 12:34.

The "click" function only allows you to add one function (the one that's fired when you click the selected element(s)). But you're passing it two. You probably want to use the "toggle" function instead.

See this question for more info: stackoverflow.com/questions/244392/jquer....

Toggle was the original usage, I changed it to click because it was used in a similar script. Either way makes no difference. Same results.

– flipflopmedia Jan 18 '10 at 12:23.

Use both an ID and a Class: World When you need to handle it specifically: $("#myP1").toggle(); When you want to handle it with the rest: $(". Toggle").hide().

Tried that, didn't work. Or perhaps I'm not applying it correctly. I'm going to have like 10+ hidden divs, that need to be called upon specifically, by the image next to each one.Do I insert this line in the script giving each one a unique ID, and then update the code accordingly?

I have ex. Pages in my second post above. – flipflopmedia Jan 18 '10 at 12:31 You need to show us your HTML.

– Jonathan Sampson? Jan 18 '10 at 13:36 It's not letting me add the code. I have example pages here: flipflopmedia.

Com/test/ToggleTEST. Html flipflopmedia.Com/test/ToggleTEST2. Html – flipflopmedia Jan 18 '10 at 14:00 flipflopmedia.

Com/test/ToggleNEW2. Html Found this script that works, swapping images and divs correctly, but it uses a switch method, and I want to use toggle. Not sure if it would be easier or possible to apply it to this script, seeing that it's already working... just need it to toggle.

– flipflopmedia Jan 18 '10 at 14:03 flipflop, without knowing your HTML I cannot comment. I'm sorry. – Jonathan Sampson?

Jan 18 '10 at 14:17.

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: 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.

Ok now that you have posted an example, there are 3 things that need to be fixed: (1) Change the toggle ID to a class (2) using $('#toggle'). Toggle('slow'); will only work on the first ID, switching it to $('. Toggle').

Toggle('slow'); will always toggle ALL elements, so remove it. (3) Because then "next" element after the image is your Header # you need to switch your selector to $(this).next().next(). Toggle('slow'); because .next() will only find the very next element.

Adding a selector inside of it only compares it and applies the next function if valid. – fudgey Jan 19 '10 at 11:47 I ran out of room, so here is the .next() reference (api.jquery. Com/next).

And also please see the demo I posted in my answer. – fudgey Jan 19 '10 at 11:49 Ok, (4) things... update your jQuery from 1.2.3 to v1.4. Link to it using google's servers like this: – fudgey Jan 19 '10 at 11:56.

You want be able to derive the id for the element(s) to toggle from the attributes of the element being clicked. In other words, based solely on the information contained within attributes the element being clicked, you can construct the id (and/or classes) for the element(s) to toggle. Possibly correlate the id of the element with the onclick handler to the id of the element(s) you want to toggle.

For example, if you click on an img with id="checkmark1" and make the element being toggled have id="checkmark1_content", then your click handler can be: $('#' + this. Id + '_content').toggle(); Classes would be used for toggling more than one (or a few) elements: $('. ' + this.Id + '_content').toggle(); Based on the test-case provided in the comments below, here is the solution: Toggle Test Toggle 1 Toggle 2 Toggle 3 Toggle Everything only toggle1 only toggle2 only toggle3 always toggled toggle1 and toggle2 toggle1 and toggle3 toggle2 and toggle3 toggle1, toggle2 and toggle3.

This makes sense, but I cannot apply it to the script correctly to make it work! I must be doing something wrong. This is what I'm looking for.

A simple line in the script that will tell it if XXX is appended to id name, then expand/hide that one. Can you help me out some more please. My test pages are here: flipflopmedia.Com/test/ToggleTEST.

Html These are the original pages, nothing you have suggested applied. Thanks, Tracy – flipflopmedia Jan 18 '10 at 12:53 Answer edited... – nicerobot Jan 18 '10 at 15:25.

The problem lies here: $('. Toggle'). Toggle('slow'); This piece of code will of course toggle all the HTML elements with class="toggle".

Depending on your HTML structure, do something like this instead: $(function() { $('. Toggle').hide(); $('. Show').

Click(function() { $(this). Next('. Toggle').

Toggle('slow'); $(this). Attr('src', 'images/checkmark2. Jpg'); return false; }, function() { $(this).

Next('. Toggle'). Toggle('slow'); $(this).

Attr('src', 'images/checkmark1. Jpg'); return false; }); }).

Copied this completely, and now only the image changes once, but not back to original state; and divs (none) expand. – flipflopmedia Jan 18 '10 at 12:42.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.