Apr 062013
Article Javascript

A fancy way to display a list of items structured in categories and sub-categories, is by means of a drop-down list. The user can choose to expand an examine only the content of categories and sub-categories that interest him/her.

This post explains a method to implement this functionality using HTML, CSS and javascript.

The resulting drop-down list

Below is a sample of the kind of expandable list that can be generated following the procedure explained in this post:

Points of interest in Córdoba

  • Tourism
    • Attractions
      • Palacio de Moret
      • plaza de toros
      • Alcázar de los Reyes Cristianos
      • Calleja del Pañuelo
      • Baños árabes - Hamman
      • Tren del Aceite
  • Transport
    • 60 Parkings
    • 13 Paradas de autobús
    • 622 Estaciones de gasolina
    • 5 Estaciones de autobuses
      • Estación central de Osuna
      • Estación de Autobuses (Cabra)
      • Estación de Autobuses (Lucena)
      • Estación de Autobuses (Lucena)
      • Estación de Autobuses (Cabra)
    • 16 Paradas de taxi


The HTML code

The HTML code of the list is a hierarchical structure of elements, created using the html tags <ul> and <li>:

  • Every item in the list is enclosed in tags <li>…</li>
  • A group of items is enclosed in tags <ul>…</ul>
  • An item in the list can include a subgroup, in a hierarchical structure of two or more levels.

The topmost group is identified adding the attribute id=”expList” to the <ul> tag

Items in the list that include subgroups are indentified as well, adding the attribute class=”expandIcon” to the <li> tag

<div style="background: #f0ffff">
<h2>Points of interest in Córdoba</h2>
<ul id="expList">
  <li class="expandIcon"><h3>Tourism</h3>
      <li class="expandIcon">Attractions
          <li>Palacio de Moret</li>
          <li>plaza de toros</li>
          <li>Alcázar de los Reyes Cristianos</li>

The javascript code

The javascript code used in the implementation makes use of the jQuery library.

In the jQuery initialization code, a call to “prepareLlist()” is added.

This function identifies all the <li> elements that are descendant of the <ul> element identified with the id “expList”, and also include <ul> subgroups, and assigns an “onclick” event handler to them.

The onclick handler toggles the visibility of <ul> groups that are children of the clicked-on item. It also adds or removes from the item the “el_expanded” class. This class determines the icon displayed to the right of the item (in the sample above, a “+” sign if the list is contracted, or else a “-” sign if it is expanded).

<script type="text/javascript">
function prepareList() {
    .click( function(evt) {
        if (this == evt.target) {
        // Prevent event propagation
        if (!evt) var evt = window.event;
        evt.cancelBubble = true; // in IE
        if (evt.stopPropagation) evt.stopPropagation();

jQuery(document).ready( function() {

The CSS code

Finally, some CSS code is used to specify the style of the list items

In the sample, this CSS code is used:

#expList ul {
    list-style: none;
    cursor: pointer;
#expList li {
    list-style: none;
    cursor: pointer;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
#expList .el_collapsed {
    background-image: url(/images/collapsed.png);

#expList .el_expanded {
        background-image: url(/images/expanded.png);

 Posted by at 11:25 am

 Leave a Reply