1) You're adding the class to the .accToggler element but your css was
looking for the .opened element inside the .accToggler element. 2) The
.opened definition should appear after the .accToggler definition. So the
CSS change below should work for you... give it a try...
#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;
}
#faq .opened {
/* everything else is set by accToggler, just override background */
background-image: url(/images/design/faqBarCloseBkgd.jpg);
}
Brian.
On 5/18/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
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.
