Home page: expanding and collapsing hierarchical text

A home page is the first page users see when they run your application. The home page in this example, index.html, presents some current information and provides access to the other pages in the application. For a full listing of the DHTML source code for this page, see Home page sample: expanding and collapsing hierarchical text.

The home page, as it displays initially, is shown in the following figure.

Home page as initially displayed

When the user taps the down arrow icon in the upper-right corner, a navigation bar appears.

Home page with navigation bar displayed

The figure above shows the different parts of the home page.

  • Application header area displays a consistent header for all pages of the application. McGarrett International is the hypothetical company's name. The lower portion displays a brief descriptive title for the current page, QUICK UPDATE for the home page.

  • Main application content display area is where the content for each page is displayed. This area expands vertically as needed.

  • Navigation links at the bottom of the page are always available, and serves as an alternative to the icons in the drop-down navigation bar.

  • Navigation bar is a graphical navigation aid, displayed only when the user taps the down arrow in the upper-right corner of the page.

    The page is laid out in a one-row, two-column table. The navigation bar occupies the right-hand cell in the row. Everything else is in the left-hand cell.

    Note

    This page layout is used for all pages in this sample application. Only the descriptive title and the content display area change on different pages. The parts that do not change are described only in this section for the home page.

    The main content area of the home page lists some headings for which additional text is available. When the user taps a heading, the additional text is displayed below it. Tapping the same heading again causes the additional text to disappear. This allows the mobile user to display only the desired details.

    The following figure shows the home page with the additional text displayed for the ROADMAP heading.

    Home page with additional text displayed for a heading

    Here is the DHTML for the first heading, ROADMAP, with key portions that implement the hiding and displaying of the additional text shown in bold: 

    <!-- Quick Update 1 -->
<IMG height=11 src="pointer1.gif" width=16 border=0> 
<b> 
<A onclick="return ExpandDisp('item1Text');" href ="#">
ROADMAP
</A>
</b>
    		 
    <div ID="item1Text" style="display:none;">
Supply issues in the Singapore plant have not 
affected the company's Q2 release schedule.
</div>

The additional text bracketed by <div> tags is initially hidden by the style="display:none;" setting. The name given to the additional text by the ID="item1Text" attribute setting allows the onclick event handler for the main ROADMAP heading to target the additional text when it calls the ExpandDisp() function: onclick="return ExpandDisp('item1Text');".

The ExpandDisp() function is located at the top of the page code, in the <script> section: 

function ExpandDisp(id) 
{
    var element = document.getElementById(id);
    if (element.style.display == "none")
        element.style.display = "block";
    else if (element.style.display == "block")
        element.style.display = "none";
    }

The item1Text identifier is passed to the ExpandDisp() method as the id parameter. The method uses the DOM document.getElementById() method to get a reference to the DIV containing the text based on this ID. Then the state of the DIV element's display property is toggled.

Copyright © 2008, iAnywhere Solutions, Inc.