JQuery toggle Q&A: individual Q&As don't operate correctly unless you click on Open All/Close All first

Question

I have a Q&A list with "Open All/Close All" at the top with individual open and close image buttons that toggle when clicked. That works fine.

Then follow individual Q&As, and each has its own open and close image.

If you click on "Open All/Close All" first, as soon as the page loads, and then click on the individual Q&A open/close images, all works fine. But if after page load you click on the individual Q&A open/close images, bypassing "Open All/Close All," they display the inappropriate open or close image.

Here is page code:

<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>

<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>

Here's the script (also uses Jquery):

$(function() {
    $(".qa").click(function() {
        $(this).find("div").next().slideToggle("fast");
        if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
            $(this).find("div:eq(0)").find("img").attr("src", "close.gif");
        }
        else {
            $(this).find("div:eq(0)").find("img").attr("src", "open.gif");
            }
    });
    $(".answersee").click(function() {
        $(".answer").show("fast");
        $(".qa > div > img").attr("src", "close.gif");
        $(".answerhide").show();
        $(".answersee").hide();
        })
    $(".answerhide").click(function() {
        $(".answer").hide("fast");
        $(".qa > div > img").attr("src", "open.gif");
        $(".answersee").show();
        $(".answerhide").hide();
        })
});

I don't think it's a CSS problem, or I'd include that code here. Do I need to initialize the script in some way? Or did I make a mistake in the above script?

Answer 1

You need to use the callbacks because your animation will not have finished by the time to check for which image is being shown.

 $(".qa").click(function() {
    $(this).find("div").next().slideToggle("fast", toggleImage);
 }

 function toggleImage(){
    var $img = $(this).find("img");
    $img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");

 }

N.B There are better ways to do this but lets get you working first and then see if you want to refactor it some more.

Answer 2

Thank you for taking the time to provide this. I will try this later today and report back. In my version, I toggle the Open All/Close All feature. It's a cleaner look and easier to use, since you don't have to move your mouse.

Answer 3

Redsquare and Solution Yogi:

Thanks. I will reply again later and also post a working demo so you can see the problem more clearly. Sorry, I should have done that before.

Liz