Dynamically hiding and showing content within a web page adds interactivity and gives the user more control over what they want to read. Scripting can provide that collapsible functionality, but it’s also important to keep the content accessible. The flexibility of the jQuery library lets us achieve this with relative ease.
One of the most appropriate times to use this display toggle is with the dl, or definition list, tag. It means that we can display the item with the dt tag, but allow users to expand the list and view individual item descriptions stored in the dd tag.
A Basic Definition List
The HTML for the list is very simple.
<dl> <dt>Item 1</dt> <dd>Item 1 description</dd> <dt>Item 2</dt> <dd>Item 2 description</dd> </dl>
We’re going to use a combination of jQuery and CSS to toggle visibility for the dd content.
Hiding The dd Content
Simple CSS would allow us to hide each dd:
dd
{
display: none;
}
But we want to be able to have different dd tags toggled on and off. We’re going to do this by defining the class of the dt tags. So we’re better defining the CSS so that it specifies dd tags that are adjacent to dt.
dt + dd
{
display: none;
}
Creating The Toggle
Now we want to use jQuery to dynamically change the class of the dt, and we’ll use CSS to change the visibility of the adjacent dd.
Our jQuery is:
$(document) .ready(function()
{
$('dt') .click(function(event)
{
$(this) .toggleClass('active');
});
}
Now if we click on the dt it will toggle the class “active” on and off. This lets us update our CSS.
dt + dd
{
display: none;
}
dt.active + dd
{
display: inherit;
}
The dd is set to display when the preceding dt has the class “active”. That means when a user clicks on the dt and sets its class to “active” it will show the additional content. When they click the dt again, it will remove the “active” class and hide the dd content.
Wait, There’s An Accessibility Issue
The method works great for nearly everyone, but there’s a problem. If a user has Javascript disabled then they won’t be able to access the dd content at all. That’s because our CSS sets the dd to display: none as default. We need to fix that, and the best way to do it is to use jQuery to create a class which we use to hide the dd.
$(document) .ready(function()
{
$('dt') .addClass('inactive');
$('dt') .click(function(event)
{
$(this) .toggleClass('active');
});
}
Then we need to update our CSS.
dt.inactive + dd
{
display: none;
}
dt.active + dd
{
display: inherit
}
If Javascript is disabled then the “inactive” class is never loaded, so all the content stays visible. If Javascript is enabled then each dt is given the class “inactive” and all the adjacent dd content is hidden. Clicking on a dt toggles the “active” class, and because that’s after the “inactive” class in our CSS, it will override it and make the relevant content visible.
That means that users with Javascript disabled will automatically see all the content when the page loads. Users with Javascript enabled will see a list of dt titles, and will be able to toggle the visibility of the dd content.
Click here to view an example of the functional code.
Edit: Apparently this has some problems in IE. For some reason, although jQuery correctly attaches the right classes to the divs, and IE identifies the correct stylesheet, the ‘click’ event doesn’t change the appearance. I’ll try and track down the problem, and write a note about the solution when I do.