Creating a jQuery Django Accordion Widget Tutorial

Creating a jQuery Django Accordion Widget Tutorial

Django Accordion Widget - Title
Complete Tutorial - 7 Minute Read

Why use a jQuery Django Accordion Widget?

The jQuery Django Accordion Widget is useful whenever you have a lot of information that you want to share with a customer or viewer, but don’t necessarily have the page space or don’t want your webpage to be extremely long. 

It’s also important whenever you offer many different products or services. It gives the viewer the ability to read about only what they’re interested in rather than having to browse your entire site. This helps out with overall site organization. 

Django Accordion Widget - Example
An example of an Accordion Widget

See an Example of a jQuery Django Accordion 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.

 

First, we need the source code for the jQuery Django Accordion Widget

To get the source code for the accordion 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”>
<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() {
$( "#accordion" ).accordion();
} );
</script>

There’s multiple different functionalities available, but I’m just going to use the default one for the purposes of this tutorial. The first section is just the styling that jQuery gives by default, the actual Javascript elements are in the script source lines in the second section.

Using the Accordion JavaScript to create a Django Accordion 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. 

Next, to designate you want to begin using the jQuery Widget in your Django application, you need to give a div the id of ‘accordion’

<div id=”accordion”>Content </div>

The default Javascript is then written into the jQuery widget that for every H3 heading, you will get another section in your widget, or one heading you can click to reveal information below. Under each heading, you should then put a div container with the content inside the heading immediately above it. 

This is the full code for my working example:

{% block content %}

<div id=”accordion”>
<h3>Product A</h3>
<div>
<p>
Here you can describe and showcase your most important product or service. Or your most valuable information.
</p>
</div>
<h3>Product B</h3>
<div>
<p>
If you user is looking for the secondary product ‘B’ in your catalog, they can select the option here to review this information. </p>
</div>
<h3>Product C</h3>
<div>
<p>
You can also include other elements inside an accordion tool, this includes many html elements. You can also include quite a few jQuery widgets within your accordion widget.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Product D</h3>
<div>
<p>
There is no limit to how much you place into your accordion widget. In this one we’ve placed two seperate paragraphs.
</p>
<p>
However, you could continue on and on. This is useful if you’re wanting to display massive amounts of content on one page, rather than spreading it out. Particularily useful with things like SEO, targeted marketing, etc.
</p>
</div>
</div>
{% endblock %}

Notice a couple of things: 

  • You can put as much as you want – or as little – into each django accordion widget section. All that matters is that it’s contained within the same div container. 
  • You can put other things other than paragraph text into the accordion widget. I only have a list in a section above, but you can also include images and even other widgets. Get creative! This opens up the possibility of different calls of actions in each of the different headings. 

But that’s pretty much it whenever it comes to creating your own jQuery Django Accordion 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 the Content? Join the Django Development Newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

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