I have an FAQ page that shows and hides information when a question is
clicked. I'm trying to replace the background image of the toggled
question. What happens is that I can see that the class that has the
changed background specified is getting added to the html, however,
the background image is staying the same :(

Here's my jquery stuff:

$(function() {
                $
('#faq').find('.accContent').hide().end().find('.accToggler').click(function()
{
                $(this).next().slideToggle();
                });
                 $(".accToggler").click(function() {
                        $(this).toggleClass("opened");
                        });
        });

Here's a snippet of the FAQ HTML:

<div id="faq">
   <h3 class="accToggler">1. Does it really work?</h3>
        <div class="accContent">
              <p>ClearSkin-A Acne Gel and FaceWash have each been very
effective with a very high success rate. We get an extremely high
reorder rate on these products, indicating that our customers are very
satisfied with them. In fact, they have been sold to literally
thousands of customers in virtually every country around the world!</
p>
        </div>
</div>

CSS:

#faq .accToggler .opened {
        display:                        block;
        height:                         50px;
        width:                          425px;
        margin:                         0;
        color:                          #8b6439;
        font:                           normal 12px/50px Verdana, Arial, 
sans-serif;
        padding:                        0 85px 0 18px;
        cursor:                         pointer;
        background:                     url(/images/design/faqBarCloseBkgd.jpg) 
no-repeat;
}
#faq .accToggler {
        display:                        block;
        height:                         50px;
        width:                          425px;
        margin:                         0;
        color:                          #8b6439;
        font:                           normal 12px/50px Verdana, Arial, 
sans-serif;
        padding:                        0 85px 0 18px;
        cursor:                         pointer;
        background:                     #f4efdc 
url(/images/design/faqBarOpenBkgd.jpg) no-
repeat;
}
Using FireBug I see that the h3 tag is getting switch to "accToggler
opened". No visual change in the background image though.

Reply via email to