A-Z List

Alphabetically listed items/pages/links in a A-Z listing.

This pattern is designed to be used on a page in a stand-alone manner or within an accordion. It is a cutdown alternative to an autocomplete A-Z pattern.

Please note: After you copy this pattern, you need to REMOVE THE FOLLOWING CODE:

class="ui-state-disabled"

and

class="atoz-cooked"

You'll also need to replace the following code:

<a style="border-bottom-style: none;" href="#services-atoz"><img class="ui-divide" alt="return to top" title="return to top" src="/global/v/redesign1/images/top_icon.gif" border="0"></a> <div class="ui-divide"></div>

with this:

<!-- WFINC="virtual(/global/includes/ui/divide.html)" -->

Using The Code Statically

If you're a-z list DOESN'T contain links, you'll need to use the code statically and therefore will need to use the 'ui-state-disabled' class on the a-z links at the top of the page to indicate what section has links. The automated disabled state and display of # items in the items with content will not work if the content doesn't have links. You'll also need to leave the class of 'atoz-cooked' in place, so the only thing you need to replace from the below code is the back to top code which is replaced with the WFINC above.