Expanding Text

Let's put the display property to work. Click the plus sign icons in the paragraph below.

As mentioned before, the inline, block, and none values are only a few of the available values for the display property the others are: list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption but those are all that we need to implement these “parenthetical” expressions which would otherwise require use of a frame or a pop-up window .

The contracted and expanded <span>s come in numbered pairs with ids starting with c for the contracted span and e for the expanded span. Here's some of the HTML from this page:

<span id="c1" class="short"><a href="javascript:swap(1, true)"><img
    alt="more" src="../plus.png" border="0" width="12" height="12"></a>
</span>
<span id="e1" class="long">
<a href="javascript:swap(1,false)"><img src="../minus.png"
    alt="less" border="0" width="12" height="12"></a>
which would otherwise require use of a frame or a
pop-up window
</span>.

With this stylesheet:

.short { display:inline; }
.long { display:none; background-color: #ffff99; }

And this JavaScript to tie it all together:

function swap( divNum, expanding )
{
    if (expanding)
    {
        setIdProperty("s" + divNum, "display", "none");
        setIdProperty("l" + divNum, "display", "inline");
    }
    else
    {
        setIdProperty("l" + divNum, "display", "none");
        setIdProperty("s" + divNum, "display", "inline");
    }
}

display values Expanding Menus