Take the 2-minute tour ×

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>

Here's the script (also uses Jquery):

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

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?

share|improve this question
add comment

4 Answers

Here's how I would do it.

Working Demo →


Update the code to have simple open/close link.

Code with comments which explains my approach:


        font-family: "Verdana";
        font-size: 12px;

        background-color: #ccc;
        cursor: pointer;
        padding: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid #000;

    .answer {
        padding: 5px;



            //Hide all the answers on page load.

            //For all questions, add 'open'/'close' text.
            //You can replace it with an image if you like. 
            //This way, you don't need to specify img tag in your HTML for each question.
                .append(' <span>[ open ]</span>');

            //Now there are two ways to toggle the visibility of answer.
            //Either click on the question OR click on Open All / Close All link.
            //To use the same code for both instances, we will create
            //a function which will take the 'question' div and toggle the answer for it.
            //Advantage of this approach is that the code to toggle the answer is in
            //one place.

            //By default, this function will try to toggle the status of the answer
            //i.e. if it's visible, hide it otherwise show it.
            //This function will take a second argument called 'showAnswer'.
            //If this argument is passed, it overrides the toggle behavior.
            //If 'showAnswer' is true, answer is shown.
            //If it's false, answer is hidden.
            //This second parameter will be used by the 'openAll', 'closeAll' links.
            var toggleAnswer = function toggleAnswer(question, showAnswer)
                //The way I have structured the HTML, answer DIV is right after 
                //question DIV.
                var $answer = $(question).next('div');

                //Animation callback, after the animation is done, we want to 
                //switch the 'text' to display what could the user do with the question.
                //Once again, you can change this code to show open/close image.
                var updateText = function()
                                    var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';

                var method = null;

                if(arguments.length > 1)
                    //If the function was called with two arguments, use the second
                    //argument to decide whether to show or hide.
                    method = showAnswer === true ? 'show' : 'hide';
                    //Second argument was not passed, simply toggle the answer.
                    method = $answer.is(':visible') ? 'hide' : 'show';

                $answer[method]('fast', updateText);

            //On each question click, toggle the answer. 
            //If you have noticed, I didn't enclose both Q&A inside one DIV.
            //The way you have done if user clicks on the answer, answer will collapse.
            //This may not be desirable as user may want to copy the answer
            //and he won't be able to.
            $('.question').click(function(){ toggleAnswer(this);});

            //We will reuse the same toggleAnswer method in openAll, closeAll 
            //handling. This way, if you want to change behavior of how the question/answers
            //are toggled, you can do it in one place.
                    var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
                    $('.question').each(function() { toggleAnswer(this, showAnswer); });
                    $(this).html(showAnswer ? 'Close All' : 'Open All'); 
                    return false;

<title>simple document</title>

<a id='openClose' href='#'>Open All</a>

<br /><br />




share|improve this answer
add comment

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

    $(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.

share|improve this answer
Hmm, that wasn't it. I wonder if there's an error. –  Liz Jul 31 '09 at 1:07
Thank you for your help, though. I'm not able to integrate your code successfully with the rest of mine. I've tried various things. Can you provide the entire script? I know that's asking a lot, but I must be making a mistake in my syntax. –  Liz Jul 31 '09 at 1:20
Sorry I read the Q wrong. its late. If nobody else helps I will do it when I wake up. –  redsquare Jul 31 '09 at 1:32
@redsquare - N.B instead of P.S? any chance you from Israel? ;-) –  Tom Teman Jan 4 '11 at 10:00
@Tom Teman nope I am uk based. NB sounds ok here - " to draw the attention of the reader to a certain (side) aspect or detail of the subject on hand" –  redsquare Jan 4 '11 at 11:21
show 1 more comment

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.

share|improve this answer
add comment

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.


share|improve this answer
Liz, please make use of comments to post your comment to any particular answer. I also updated my code to use single 'open/close' link. –  SolutionYogi Jul 31 '09 at 16:23
add comment

Your Answer

