Jquery-UI tabs not working
html, jquery, jquery-ui
Solution
You need to include the JQuery UI CSS file.
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
That should do it.
Problem
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.