Building an Accordion UI (^) ❘ 375
ul {
list-style: none;
margin: 0 ;
padding: 15px 5px;
}
li {
background: gold;
padding: 3px;
width: 244px;
margin: 1px;
}
The following script makes the
- element in the markup document into an accordion with a
simple function call:
$(document).ready(
function()
{
$('ul').accordion();
}
);
Figure 15-1 shows that although the accordion has been created, your work here is not
yet done.
FIGURE 15-1
You see the most basic but functioning example of the Accordion plugin possible. By calling the
accordion() method on the
- element, the
- element is transformed into accordion UI. When
you click an element, the corresponding text in the sibling element is expanded by a smooth, animated transition. Structurally speaking, jQuery’s Accordion plugin wants to be applied to a collection of elements; like a
element, after the plugin is applied, it automatically recognizes each element as being
the header portion of each content pane. Later this chapter discusses in more detail how to approach
styling an accordion.