So i'm trying to make tabs with the JQuery UI framework, but I can't get them to work. It just shows up as a bulleted list, and then with the divs all under each other. I read on another post that you needed some sort of css/theming which i didn't have before, so i downloaded one with a custom theme. i unzipped it in my media folder and it made the js, css, and development-bundle folder.
I have the two js scripts included in the page, and i checked in the chrome developer tool to make sure they were loading and they are. I also ahve the following code in my file:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<div id='tabs'>
<ul>
<li><a href='#tabs-1'>Manage Categories</a></li>
<li><a href='#tabs-2'>Add Forms</a></li>
<li><a href='#tabs-3'>Change Forms</a></li>
</ul>
<div id='tabs-1'>
<h4>Current Categories</h4>
{% for category in categories %}
<a href='/admin/fm/delcat/{{ category }}/'>Delete</a> {{ category }}<br />
{% endfor %}
</div>
<div id='tabs-2'>
<p> stuff</p>
</div>
<div id='tabs-3'>
<p>stuff</p>
</div>
</div>
Not sure why it doesnt work.