Those who have tried the example from last weeks article might have noticed a little something. When you first click on the session title, the session description while come visible. Then clicking again on the session title "apparently" nothing happens. The code behind the onClick event was just for opening the session description. Because it is already open, there is only a brief flicker to be seen. We will adjust the code so that the function remembers the current state and either displays or hides the session description.

This is the code from last week://Loads fx (animation) package
dojo.require("dojo.fx");
//Loads the behavoir package
dojo.require("dojo.behavior");

//Object to hold all description toggler
var descriptionTogglerList = new Object();

function registerDescriptionToggle(headlineNode) {
//calculate an id for the headline
var headlineID = "head" + headlineNode.parentNode.id ;
//and assign it to the element
headlineNode.id = headlineID;

//add style to title for pointer
dojo.style(headlineID, "cursor", "pointer");

//retrieve the description id from the parent node
var descriptionID = "desc" + headlineNode.parentNode.id ;

//create a new toggler
var toggler = new dojo.fx.Toggler({
node: descriptionID,
showFunc: dojo.fx.wipeIn,
hideFunc: dojo.fx.wipeOut
});
//hide the description
toggler.hide();

//store the toggler in the list
descriptionTogglerListheadlineID = toggler;
}

//shows a description
function showDescription(headlineID){
descriptionTogglerListheadlineID.show();
}

//hide a description
function hideDescription(headlineID){
descriptionTogglerListheadlineID.hide();
}


dojo.addOnLoad(function(){
// search for all headlines and register a toggler
dojo.query("div.session h1").forEach(registerDescriptionToggle);

// add the behavior to the sessions headlines to open the description on click
dojo.behavior.add({
"div.session h1": {
onclick: function(evt){
var headlineID = evt.target.id;
showDescription(headlineID);
}
}
});

// add the behavior to the description to close on click
dojo.behavior.add({
"div.session div.sessionDescription": {
onclick: function(evt){
var descriptionID = evt.target.id;
var headlineID = descriptionID.replace(/^desc/g, "head");
hideDescription(headlineID);
}
}
});

dojo.behavior.apply();
});

If we take a closer look to the API we will discover that there is no property in the dojo Toggler object representing the current state of the toggler. Because there is no other way to find out if the corresponding element is visible or not we have to take care about it ourselves.

Instead of storing the Toggler object for every session title directly in the object descriptionTogglerList, we create a new object, which has two properties. One property for the toggler and one for the current state.//create new object with the toggler and store it in the list
descriptionTogglerListheadlineID = {
toggler: toggler,
isVisible: false
};

We also have to modify the functions for hiding and showing the session descriptions.
//shows a description
function showDescription(headlineID){
descriptionTogglerListheadlineID.toggler.show();
descriptionTogglerListheadlineID.isVisible = true;
}
//hide a description
function hideDescription(headlineID){
descriptionTogglerListheadlineID.toggler.hide();
descriptionTogglerListheadlineID.isVisible = false;
}
//toggle a description
function toggleDescription(headlineID){
if (descriptionTogglerListheadlineID.isVisible){
hideDescription(headlineID);
} else {
showDescription(headlineID);
}
}
With this small adjustment our sample behaves a little bit more as one would expect.

In the sample database belonging to this series of articles you can find the content of this article in the form "webSpeedAgendaing-Step 5 | SpeedAgendaing-5" and the JavaScript library "SpeedAgendaing-Step5.js".

In the next article we will talk about the dialog dijit. The aim will be to reload and display information about the speakers in a dialog.