A PanelBar can be created either by specifying its structure in the HTML markup or by configuring it using an API. In this recipe, we will take a look at the former approach.
A PanelBar widget contains a list of items stacked vertically. To create a PanelBar, we will need a list of items and hence we use the HTML's ordered or unordered list. In this example, we will list travel destinations, airlines, and important sights to visit as three panels:
<ul id="panelBar" style="width: 400px"> <li> Destinations </li> <li> Flights </li> <li> Important Sights </li> </ul>
Here, the list contains three items and these are the headings for each panel that we want to have. Also, the
width property is set to
400px which will set ...