I'm trying to get an accordian to work so that when the toggle link is
selected the background image changes. I have it working on the first item
in the accordian, but the remaining 3 do not change their background image.
Any ideas?
P.S. How do I get the accordian to stay open and only close when the toggle
link is click (not automatically closing when another item in the accordian
is clicked)?
HTML:
<div id="accordian">
<h3 id="fridayNightConcertSeries"
class="">Friday Night Concert
Series</h3>
images/design/logoConcerts.jpg
<p>Content</p>
<h3 id="saturdayNightFreeMovies"
class="">Saturday Night Free
Movies</h3>
images/design/logoConcerts.jpg
<ul>
<li> # SHOWS </li>
<li> # ARTIST PROFILES &
AUDIO SAMPLES </li>
</ul>
<p>Content</p>
<h3 id="iowaArtsFestival" class="">Iowa Arts
Festival</h3>
images/design/logoConcerts.jpg
<ul>
<li> # SHOWS </li>
<li> # ARTIST PROFILES &
AUDIO SAMPLES </li>
</ul>
<p>Content</p>
<h3 id="iowaCityJazzFestival" class="">Iowa
City Jazz Festival</h3>
images/design/logoConcerts.jpg
<ul>
<li> # SHOWS </li>
<li> # ARTIST PROFILES &
AUDIO SAMPLES </li>
</ul>
<p>Content</p>
</div>
CSS:
#accordian {
margin-top: 20px;
border: 1px solid #b99f40;
}
#accordian h3 {
height: 33px;
text-indent: -5000px;
overflow: hidden;
cursor: pointer;
}
#fridayNightConcertSeries {
background:
url('../images/design/acFridayExpand.jpg') no-repeat;
}
#fridayNightConcertSeries.selected {
background:
url('../images/design/acFridayClose.jpg') no-repeat;
}
#saturdayNightFreeMovies {
background:
url('../images/design/acSaturdayExpand.jpg') no-repeat;
}
#saturdayNightFreeMovies.selected {
background:
url('../images/design/acSaturdayExpand.jpg') no-repeat;
}
#iowaArtsFestival {
background:
url('../images/design/acArtsExpand.jpg') no-repeat;
}
#iowaArtsFestival.selected {
background:
url('../images/design/acArtsExpand.jpg') no-repeat;
}
#iowaCityJazzFestival {
background:
url('../images/design/acJazzExpand.jpg') no-repeat;
}
#iowaCityJazzFestival.selected {
background:
url('../images/design/acJazzExpand.jpg') no-repeat;
}
jQuery:
jQuery().ready(function(){
// simple Accordion
jQuery('#accordian').Accordion({
active: false,
alwaysOpen: true,
showSpeed: "fast",
hideSpeed: "fast"
});
$('#accordion').Accordion().change(function(event, newHeader,
oldHeader,
newContent, oldContent){
if (newHeader.text() == oldHeader.text ()) {
newHeader.removeClass('selected').addClass('notSelected');
}
});
});
--
View this message in context:
http://www.nabble.com/Accrodian---background-image-changing-on-select-%28one-working%2C-other%27s-are-not%29-tf3472889.html#a9691769
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
