Here's a sample:
Expand
Contract
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
Here's the full code below:
<style type="text/css">
<!--
.short { display:inline; }
.long { display:none; }
-->
</style>
<script language="JavaScript">
var isNav4, isNav6, isIE4;
function setBrowser()
{
if (navigator.appVersion.charAt(0) == "4")
{
if (navigator.appName.indexOf("Explorer") >= 0)
{
isIE4 = true;
}
else
{
isNav4 = true;
}
}
else if (navigator.appVersion.charAt(0) > "4")
{
isNav6 = true;
}
}
function getStyleBySelector( selector )
{
if (!isNav6)
{
return null;
}
var sheetList = document.styleSheets;
var ruleList;
var i, j;
for (i=sheetList.length-1; i >= 0; i--)
{
ruleList = sheetList[i].cssRules;
for (j=0; j<ruleList.length; j++)
{
if (ruleList[j].type == CSSRule.STYLE_RULE &&
ruleList[j].selectorText == selector)
{
return ruleList[j].style;
}
}
}
return null;
}
function getIdProperty( id, property )
{
if (isNav6)
{
var styleObject = document.getElementById( id );
if (styleObject != null)
{
styleObject = styleObject.style;
if (styleObject[property])
{
return styleObject[ property ];
}
}
styleObject = getStyleBySelector( "#" + id );
return (styleObject != null) ?
styleObject[property] :
null;
}
else if (isNav4)
{
return document[id][property];
}
else
{
return document.all[id].style[property];
}
}
function setIdProperty( id, property, value )
{
if (isNav6)
{
var styleObject = document.getElementById( id );
if (styleObject != null)
{
styleObject = styleObject.style;
styleObject[ property ] = value;
}
}
else if (isNav4)
{
document[id][property] = value;
}
else if (isIE4)
{
document.all[id].style[property] = value;
}
}
function generic_move( id, xValue, yValue, additive )
{
var left = getIdProperty(id, "left");
var top = getIdProperty(id, "top");
var leftMatch, topMatch;
if (isNav4)
{
leftMatch = new Array( 0, left, "");
topMatch = new Array( 0, top, "");
}
else if (isNav6 || isIE4 )
{
var splitexp = /([-0-9.]+)(\w+)/;
leftMatch = splitexp.exec( left );
topMatch = splitexp.exec( top );
if (leftMatch == null || topMatch == null)
{
leftMatch = new Array(0, 0, "px");
topMatch = new Array(0, 0, "px");
}
}
left = ((additive) ? parseFloat( leftMatch[1] ) : 0) + xValue;
top = ((additive) ? parseFloat( topMatch[1] ) : 0) + yValue;
setIdProperty( id, "left", left + leftMatch[2] );
setIdProperty( id, "top", top + topMatch[2] );
}
function moveIdTo( id, x, y )
{
generic_move( id, x, y, false );
}
function moveIdBy( id, x, y)
{
generic_move( id, x, y, true );
}
function hex( n )
{
var hexdigits = "0123456789abcdef";
return ( hexdigits.charAt(n >> 4) + hexdigits.charAt(n & 0x0f) );
}
function getBackgroundColor( id )
{
var color;
if (isNav4)
{
color = document[id].bgColor;
}
else if (isNav6)
{
var parseExp = /rgb.(\d+),(\d+),(\d+)./;
var rgbvals;
color = getIdProperty( id, "backgroundColor" );
if (color)
{
rgbvals = parseExp.exec( color );
if (rgbvals)
{
color = "#" + hex( rgbvals[1] ) + hex( rgbvals[2] ) +
hex( rgbvals[3] );
}
}
return color;
}
else if (isIE4)
{
return document.all[id].backgroundColor;
}
return "";
}
function getDocument( divName )
{
var doc;
if (isNav4)
{
doc = window.document[divName].document;
}
else if (isNav6)
{
doc = document;
}
else if (isIE4)
{
doc = document;
}
return doc;
}
</script>
<script language="JavaScript">
function swap( divNum, expanding )
{
if (expanding)
{
setIdProperty("c" + divNum, "display", "none");
setIdProperty("e" + divNum, "display", "inline");
}
else
{
setIdProperty("e" + divNum, "display", "none");
setIdProperty("c" + divNum, "display", "inline");
}
}
setBrowser();
// -->
</script>
<span id="c0" class="short"><a href="javascript:swap(0, true)">Expand</a></span>
<span id="e0" class="long"><a href="javascript:swap(0,false)">Contract</a><Br /><br />
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
</span> |