Django + jQueryUI Tabs: Open a Specific Tab on Page Load

Posted on in Programming

Django LogoI recently created a page that had different tabs using the jQueryUI Tabs widget. For whatever reason, I would occasionally want to show a specific tab on page load rather than the default initial tab. One way to do this is to set a variable in your view context and then use jQuery to open the right tab. For example:

In views.py:

def example_view(request):
    selected = 0
    context = {
        "selected": selected,
    }
    return render_to_response("example.html", context, context_instance=RequestContext(request))

And then in example.html:

<script type="text/javascript" charset="utf-8>
    $("#tabs").tabs().tabs("select", {{ selected }});
</script>

In the above example, the tab is selected using it's index. This is an integer with the first tab being represented by 0. You can also use text id values, such as #detail, instead of integers. If using text, remember to surround the Django template variable with quotes.

Further reading:

My Bookshelf

Reading Now

Other Stuff