Duh! My background images were not changed on the other 3 :) Sometimes
writing the question helps you figure out your own problem.
However, my second question is 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)?
pjhawksr wrote:
>
> 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#a9692135
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
