Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery-UI tabs not working

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> &nbsp;&nbsp;&nbsp; {{ 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.

like image 825
The.Anti.9 Avatar asked Feb 28 '23 18:02

The.Anti.9


1 Answers

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.

like image 56
Serafina Brocious Avatar answered Mar 07 '23 05:03

Serafina Brocious