jQueryUI accordion questions

Few questions regarding jQueryUI's accordion, this is the simple code I've got:

 <h3><a href="#">Section 10</a></h3>
<div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>

1. Is it possible for the divs inside the accordian to have dynamic content?

2. I know it's possible with the theme roller to change the little arrow icon, but how do I put a small image icon in th开发者_Python百科e H tag as well? no matter what I try doesn't show up, only the H tags text.

3. Is it possible to have some of the accordions bars locked, so they can't expand? while others still can?

Is it possible for the divs inside the accordian to have dynamic content?

Yes. You should be able to replace the contents of the entire div without anything terrible happening. You can accomplish this by giving the div that you want to replace the contents of an id and then when you want to replace the contents just use .html:

$("#id").html("<content>")

I know it's possible with the theme roller to change the little arrow icon, but how do I put a small image icon in the H tag as well? no matter what I try doesn't show up, only the H tags text.

I didn't have trouble adding an image to the header, although it did seem to work better if you added the img inside of the a tag that lives inside the h3 tag:

<h3><a href="#">Section 1<img src="http://www.placekitten.com/20/20" /></a></h3>

You can use CSS to space the image accordingly.

Is it possible to have some of the accordions bars locked, so they can't expand? while others still can?

Sure thing. This one really should be possible via the API, but you can hook up an event handler that prevents the accordion's event handlers from firing when you click the h3 tag:

// Disable the second tab in accordion #accordion
// Note that this could really be any selector you want, as long as it selects 
// accordion header elements.
$("#accordion h3:eq(1)").click(function(event) {
    event.stopImmediatePropagation();
});

Here's an example of all of these things working: http://jsfiddle.net/TX8z6/ (fixed an IE bug)