I'm using an accordion which functions perfectly. I was using jQuery
1.2.6 with UI 1.6 and was able to have a different background image
displayed when the section was expanded using .selected. I upgraded to
jQuery 1.3.2 with UI 1.7.2, and the selected / expanded background
image no longer works. Everything else works fine. Any suggestions on
how I can get it working again with 1.3.2 and 1.7.2?
Thanks
Pasquale
// jQuery
<script type="text/javascript">
$(document).ready(function(){
$("#accordion1").accordion({
active: false,
header: '.heading',
collapsible: true,
autoHeight: false
});
});
</script>
/** CSS **/
ul#accordion1 a.heading
{
background: url(/pics/bg1.jpg) repeat-x #b9a77d;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
display: block;
outline: none;
font-size: 13pt;
font-weight: normal;
line-height: 13pt;
padding: 10px 5px;
text-decoration: none;
}
ul#accordion1 a.heading:hover
{
background: url(/pics/bg2.jpg) repeat-x #dfd2b3;
color: #00447f;
}
ul#accordion1 a.selected, ul#accordion1 a.selected:hover
{
background: url(/pics/bg3.jpg) repeat-x #00447f;
color: #fff;
}
<!-- HTML -->
<ul id="accordion1">
<li>
<a class="heading" href="#">Heading
1</a>
<ul>
<li> <a href="link1.html">Link
1</a></li>
<li> <a href="link2.html">Link
2</a></li>
<li> <a href="link3.html">Link
3</a></li>
</ul>
</li>
<li>
<a class="heading" href="#">Heading
2</a>
<ul>
<li> <a href="link1.html">Link
1</a></li>
<li> <a href="link2.html">Link
2</a></li>
<li> <a href="link3.html">Link
3</a></li>
</ul>
</li>
</ul>