[jQuery] Accrodian - background image changing on select (one working, other's are not)

[pjhawksr]

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 &amp; 
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 &amp; 
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 &amp; 
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
discuss@jquery.com
http://jquery.com/discuss/