Here we see a
modified version of an example from the Note itself, in which a script is
defined to allow for collapsible list items:
<!DOCTYPE actionsheet
SYSTEM "asheet.dtd" [] >
<actionsheet>
<action type="text/cas"
codetype="text/javascript">
LI.collapse
{ onClick: "changeVisibility(event)" }
</action>
<script type="text/javascript">
function changeVisibility(event) {
var list = event.target.nextSibling;
var style = list.style;
if (style.display == "none")
style.display = "block";
else
style.display = "none";
}
</script>
</actionsheet>
We can associate this Cascading Action Sheet to an HTML document by
including the head-tag:
<LINK REL="ActionSheet" TYPE="text/cas" HREF="collapse.act">
...assuming that the name of the Cascading Action Sheet is, in fact,
collapse.act. Now, given a document whose HEAD contains this LINK
tag, clicking on any list item in the document with a class of
collapse will cause the expansion or collapse of any content after
that list item. Of course, the document could also contain styles to be
applied to any such list item - perhaps underlining, or a color different
from the rest of the document's text, something like this:
<HTML>
<HEAD>
<TITLE>Listy Fun</TITLE>
<LINK REL="ActionSheet" TYPE="text/cas" HREF="collapse.act">
<STYLE type="text/css">
LI.collapsible {color: green; text-decoration: underline;}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="collapsible">Chapter 1</LI>
<UL>
<LI>Section 1</LI>
<LI>Section 2</LI>
</UL>
</UL>
</BODY>
</HTML>
Thus, any "collapsible" list item in the document will be displayed as
green and underlined, providing a visual cue to which items can be collapsed.
Of course, you could change the styles to anything you wanted, and even
manipulate them from within the Action Sheet. It's up to you.
next page»
