[jQuery] Accordion - onHide / onShow actions available ?!?!
Hi, my first jquery question - be nice ;-))
I have an accordion setup via the following JS code :
<span style="font-family: courier new,monospace;">$('#Show_hide').Accordion({</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> active: false,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> alwaysOpen: false,</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> showSpeed: "slow",</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> hideSpeed: "slow"
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }); </span>
And Css like this :
<span style="font-family: courier new,monospace;">
#Show_hide {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> width: 55em;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
margin-left : 1em;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> margin-top : 1em;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">#Show_hide h3.notSelected{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
color: #fff;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-color : #036;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
background-image: url(../pictures/left_d.gif) ;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-repeat: no-repeat;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> background-position: 0.1em 50% ;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">#Show_hide h3.selected{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> color: #000;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> background-color : #E6E8FA ;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-image: url(../pictures/down_d.gif) ;
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-repeat: no-repeat;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
background-position: 0.1em 50% ;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;">
When an h3 element is clicked, it is opened and text is displayed - .selected CSS is applied - all is well.
When same element is clicked again, element is closed but .selected CSS is still applied - i like it to switch to .notSelected .
How is this done in Jquery ? I think is has to be something like an OnHide action ?!?!
And yes, I know i can set it to let it always display one item open but that is not what my client wants :P
Cees (Aka Snowtiger)
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/