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.