Creating a jQuery Django Tabs Widget Tutorial

Creating a jQuery Django Tabs Widget Tutorial

django tabs widget - Title
Complete Tutorial - 8 Minute Read

Why use a jQuery Django Tabs Widget?

The jQuery Django Tabs Widget in my opinion is the better accordion widget. So if you’ve already done that tutorial – I’m sorry! But the tabs is the much cleaner way of handling multiple paragraphs of information that you want to occupy the same space on your webpage. While the tabs widget isn’t ALWAYS better than the accordion, I find myself using the tabs widget much much more than the accordion one.

In short, The jQuery Django Tabs Widget is useful whenever you want to include a lot of information about your products or services on your page, but don’t necessarily want it all on the screen at once. Say for example you offer five different products. You want the user to have full control to read about and select the given product they’re looking for. Your user can then easily click the corresponding tab and view that information.

Additionally, by placing the items into tabs, the user can easily locate other items or services in your catalog – they’re just a tab click away. One last note on the tabs before we get into the tutorial: I like implementing elements in a website that come inherent to the user. Nothing’s worse than a website with functionality you can’t understand and therefore can’t use. Since tabs are default with most web browsers, this adds to the level of comfort with your site and comfortable visitors are happy visitors.

jQuery Django Tabs Widget - Example

See an Example of a jQuery Django Tabs Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

Source Code for jQuery Django Widgets - Transition slide
First, we need the source code for the jQuery Django Tabs Widget

To get the source code for the tabs widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
These two are just the styling jQuery uses by default.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
} );
</script>
Like always, the two first scrips are the ones which include all the widgets. Then the third script is setting up the functionality of the Tabs widget. 
 
The Tabs widget will quickly become one of your favorites to implement in your Django sites – I know it!
Using the Tabs JavaScript to create a Django Tabs Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Tabs Widget, you first need to create an overarching div with the id ‘tabs’. Then you need to create an unordered list with list items that will be the headings of your tabs. 

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab #1 Heading</a></li>
<li><a href="#tabs-2">Tab #2 Heading</a></li>
<li><a href="#tabs-3">Tab #3 Heading</a></li></ul>
Notice I didn’t close the first div container yet. Now you want to place more div containers within your first one. Each one you create needs to correspond with the href in your headings:
<div id="tabs-1">
<p>Text of your first tab</p>
</div>
You’ll do this for each one of your tabs. 

My working example doesn’t use the default functionality of jQuery’s – It however uses the mouseover option to show the content whenever the user hovers over the specific tab. You can find it here. Here’s the full code:

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}

<script>
$( function() {
$( “#tabs” ).tabs({
event: “mouseover”
});
} );
</script>
</head>
<body>

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>Coding Tutorials</a></li>
<li><a href=”#tabs-2″>Software Offers</a></li>
<li><a href=”#tabs-3″>Hire Expertise</a></li>
</ul>
<div id=”tabs-1″>
<p>Here at www.DerrickSherrill.com, we don’t feed the coders until they develop quality coding content that every user can understand. If our tutorials are hard to follow or difficult to replicate in your own workspace –please let us know! We’ll take away the crumbs. </p>
</div>
<div id=”tabs-2″>
<p>It’s hard to code without the software. Let’s get you the freshest copy of the newest, smartest software avaliable. </p>
</div>
<div id=”tabs-3″>
<h3>We don’t claim to be the experts. But we know a guy</h3>
<p>Use our network to establish a valuable connection to your next web development hire!</p>
</div>
</div>


</body>

{% endblock %}

That’s pretty much it whenever it comes to creating your own jQuery Django Tabs Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy this content? Sign up for the newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *