Jquery accordian ui is not working at all

Jquery ui is definetely loaded as I have sortable working on the same page!

My html is as follows...

echo '<div id="accordian">
<h3><a href="#">Subscriber Options</a></h3>
<div><a id="changeLayout" href="">Change Main Layout</a></div>
<h3><a href="#">Account Layout</a></h3>
<div></div>
</div>';

My Jquery...

$(function() {
$("#accordian").accordian();
});

The jq开发者_运维百科uery ui comes from google, and then my JS sheet after that, all my JS is wrapped in document.ready()

And my css for the accordian,

#accordian {width: 100%;}

#accordian h3 {padding: 5px 0; font-size: 13px; font-weight: normal; background: #333;}

#accordian div {padding: 10px 0; width: 100%; height: 300px; border: 1px solid #f00;}

I make this mistake so very, very often...

It's spelt accordion ;-)

The only other possible thing I can think is that you don't have the base CSS for the accordion loaded. I've set up this jsfiddle with jQuery 1.5.2, jQuery UI 1.8.9, the base UI css from Google's CDN and your code and it works as expected.