Home Page -> DOM Tutorials -> Expanding Text

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 more less 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 more less 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 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

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");
        setIdProperty("l" + divNum, "display", "none");
        setIdProperty("s" + divNum, "display", "inline");

  display values Expanding Menus