Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Create a Simple Dojo Accordion

By  on  

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!

Dojo Accordion

View Demo

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.

View Demo

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

  • By
    Using Opacity to Show Focus with jQuery

    A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery. The jQuery JavaScript There you have it. Opacity is a very simple but effective...

Discussion

  1. Peter Higgins

    The CSS imports are redundant. By including claro.css from the CDN you are already including the two other files you referenced. The addition http hit is unnecessary.

    I would have preferred to see a programmatic version that did not use the dojoType. The API is very simple:

    var accordion = new dijit.layout.AccordionContainer({ ... }).placeAt("someNode");
new dijit.layout.ContentPane({ ... }).placeAt(accordion);
// repeat
accordion.startup();
    • David Walsh

      Updated the CSS files — thanks Pete!

    • David Walsh

      The declarative route is probably the easier route to explain which is why I went with it.

    • Gerard

      Hi,

      How _do you do it the Programmatic way? Not by loading the content via dojo/javascript but manipulating the html itself. i.e. when you turn off javascript the content is still there.

      Also, what are the options on the accordion, there is absolutely Nothing in the dojo reference guide or API, for example the titles have a +/- symbol on them, obviously you can turn this off?

      The docs are dreadful and everything is done in the declarative.

    • David Walsh

      The programmatic way is provided by Pete Higgins above.

    • Gerard

      The code I posted above was foobar-ed, the seemed to be stripped completley, i’ll use pasties:

      I’m looking for the pragmatic way using the following html:

      http://pastie.org/2400915

      Alternatively we can sprinkle in some classes (should be able to do it without id’s) and shouldn’t require dojo specific class names:

      http://pastie.org/2400917

  2. pavs

    I really like this.

    Is there any reason why the demo has a “jerky” effect the first time it loads? It seems to load the whole content and slides back up (Chrome Dev 6.0495).

    I did something similar (I know mine’s ugly :) but it does what I need for now), do think you can do something similar in dojo (for one of your future blog post) , without opening any slide by default?

    Here is mine: http://blogriot.com/life-list/

    • David Walsh

      Part of it is the Dijit creation process from an existing set of HTML blocks. Using the programmatic method of widget creation or adding an overlay may help.

  3. MarcOs

    is possible to change the height of the accordion ^^ ?
    Im trying to put a flash animation on the accordion but is higher
    Ty…

  4. Stefano Cirilli

    Really a cool tutorial, thank you David.

  5. j

    How can I disable (or replace) the animation for a dojo accordion?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!