David Walsh Blog

Create a Simple Dojo Accordion

Let’s be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo’s Dijit library provides an incredibly simply method by which you can add accordions to your website.  Let’s take a look at how we can implement a Dojo accordion!

The Basic Dijit HTML

<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
</style>
<body class="claro">

The first piece of HTML requires grabbing the required CSS theme files and adding the theme name as a class to the BODY tag.  All widgets on the page will use the claro theme unless otherwise specified.  Once we have those details out of the way, we can code the HTML structure of Accordion:


<-- The container must be a dijit.layout.AccordionContainer -->
<div id="accordion" dojoType="dijit.layout.AccordionContainer">

	<-- Accordion item -->
	<div class="element" title="The Beatles" dojoType="dijit.layout.ContentPane">
		<img src="https://davidwalsh.name/demo/accordion/let-it-be.jpg" class="image" />
		<p>The Beatles were a pop and rock group from Liverpool, England...</p>
	</div>
	
	<-- Accordion item -->
	<div class="element" title="Rod Stewart" selected="true" dojoType="dijit.layout.ContentPane">
		<img src="https://davidwalsh.name/demo/accordion/every-picture.jpg" class="image" />
		<p>Roderick "Rod" David Stewart, CBE (born January 10, 1945), is a singer and songwriter...</p>
	</div>
	
	<-- Accordion item -->
	<div class="element" title="Oasis" dojoType="dijit.layout.ContentPane">
		<img src="https://davidwalsh.name/demo/accordion/oasis.jpg" class="image" />
		<p>Oasis are an English rock band that formed in Manchester in 1991...</p>
	</div>
	
</div>

The title attribute text will become the Accordion control’s heading.  Adding a selected attribute will make the given accordion pane start as the selected pane.

Including Dojo with parseOnLoad; Requiring Dijit Widget Classes

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

We start by pulling Dojo into the page with a normal SCRIPT tag (AOL CDN, Google CDN, local build).  Note that I’ve added a djConfig attribute with parseOnLoad:true; — this will instruct Dojo to scour the page looking for Dijit widgets once the required classes have loaded.  How do we require the proper classes?  By using dojo.require, of course:

<script type="text/javascript">
	/* require necessary classes */
	dojo.require('dijit.layout.AccordionContainer');
	dojo.require('dijit.layout.ContentPane');
	/* when all classes have loaded... */
	dojo.ready(function() {
		/*
			don't need to do anything programmatically!
			parseOnLoad and dojoType does the magic!
		*/
	});
</script>

With the proper classes loaded, Dojo will now find all widgets and inject widgets into the page as necessary.

All JavaScript toolkits have provided an easy way to create accordions and Dojo/Dijit is no exception!