June 30, 2003

Expandable/Collapsible Content

From: Web Reference Article M. C. Matti is a usability analyst at SAS, working on Web-based business intelligence applications. He's also the owner of matti.net 
1:     <html><head>

2:     <title></title>

3:     

4:     <meta name="save" content="history" />

5:     

6:     <style type="text/css"><!--

7:     .save{

8:        behavior:url(#default#savehistory);}

9:     a.dsphead{

10:       text-decoration:none;

11:       margin-left:1.5em;}

12:    a.dsphead:hover{

13:       text-decoration:underline;}

14:    a.dsphead span.dspchar{

15:       font-family:monospace;

16:       font-weight:normal;}

17:    .dspcont{

18:       display:none;

19:       margin-left:1.5em;}

20:    //--></style>

21:    

22:    

23:    <script type="text/javascript"><!--

24:    function dsp(loc){

25:       if(document.getElementById){

26:          var foc=loc.firstChild;

27:          foc=loc.firstChild.innerHTML?

28:             loc.firstChild:

29:             loc.firstChild.nextSibling;

30:          foc.innerHTML=foc.innerHTML=='+'?'-':'+';

31:          foc=loc.parentNode.nextSibling.style?

32:             loc.parentNode.nextSibling:

33:             loc.parentNode.nextSibling.nextSibling;

34:          foc.style.display=foc.style.display=='block'?'none':'block';}}  

35:    

36:    if(!document.getElementById)

37:       document.write('<style type="text/css"><!--\n'+

38:          '.dspcont{display:block;}\n'+

39:          '//--></style>');

40:    //--></script>

41:    

42:    <noscript>

43:    <style type="text/css"><!--

44:    .dspcont{display:block;}

45:    //--></style>

46:    </noscript>

47:    

48:    </head><body>

49:    

50:    <div class="save">

51:    

52:    <h1><a href="javascript:void(0)" class="dsphead"

53:       onclick="dsp(this)">

54:       <span class="dspchar">+</span> heading</a></h1>

55:       <div class="dspcont">section</div>

56:    

57:    <h1><a href="javascript:void(0)" class="dsphead"

58:       onclick="dsp(this)">

59:       <span class="dspchar">+</span> heading</a></h1>

60:       <div class="dspcont">

61:    

62:          <h2><a href="javascript:void(0)" class="dsphead"

63:             onclick="dsp(this)">

64:             <span class="dsphead">+</span> heading</a></h2>

65:             <div class="dspcont">section</div>

66:    

67:          <h2><a href="javascript:void(0)" class="dsphead"

68:             onclick="dsp(this)">

69:             <span class="dspchar">+</span> heading</a></h2>

70:             <div class="dspcont">section</div>

71:       </div>

72:    </div>

73:    

74:    </body></html>

75:    

76:


Posted by sachauncey at June 30, 2003 09:22 PM