4.6 Javascript functions

LearnPress version: 1.5

Last modified: 20 May 2008

Contents

  1. Sections
    1. Toggling visibility of sections
      1. Requirements
      2. Availability
      3. Use
      4. Live example
  2. Tables
    1. Toggling visibility of table cells
      1. Requirements
      2. Availability
      3. Use
      4. Live example

Sections

Toggling visibility of sections

Sections of the body text of a page may be hidden by default and then opened and closed by the user.

Requirements

Files
Initialization

Availability

Use

Create a div element with class "section". The first element of this section should be a header element (h2, h3, etc.). The “twisty” used to open and close the section will be appended to this header element.

Example

<div class="section">

<h2>Section 2</h2>

</div

Live example

Mandarin I | edit

Tables

Toggling visibility of table cells

Table cells can be hidden and a button used to toggle their visibility.

Requirements

Files
Initialization

Availability

Use

The cell to be toggled should be assigned class="hide". This alone will create a toggle button labeled “Hide” (or “Show”). To make the label clearer, use the headers attribute to refer to the th of that column, and give the th an axis attribute, which will become the label of the toggle button.

Example

<tr> ... <th scope="col" id="table01-col2" axis="total"><tr>

<tr> ... <td class="hide" headers="table01-col2"> ... <tr>

Live example

Mandarin I | edit