Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

Expanding menu

Code listing for xc.js

Hover over each line to read tips.

  1. /*
  2. * date: 2002-01-23
  3. * info: http://inspire.server101.com/js/xc/
  4. */
  5. var xcNode = [];
  6. function xcSet(m, c) {
  7. if (document.getElementById && document.createElement) {
  8. m = document.getElementById(m).getElementsByTagName('ul');
  9. var d, p, x, h, i, j;
  10. for (i = 0; i < m.length; i++) {
  11. if (d = m[i].getAttribute('id')) {
  12. xcCtrl(d, c, 'x', '[+]', 'Show', m[i].getAttribute('title')+' (expand menu)');
  13. x = xcCtrl(d, c, 'c', '[-]', 'Hide', m[i].getAttribute('title')+' (collapse menu)');
  14. p = m[i].parentNode;
  15. if (h = !p.className) {
  16. j = 2;
  17. while ((h = !(d == arguments[j])) && (j++ < arguments.length));
  18. if (h) {
  19. m[i].style.display = 'none';
  20. x = xcNode[d+'x'];
  21. }
  22. }
  23. p.className = c;
  24. p.insertBefore(x, p.firstChild);
  25. }
  26. }
  27. }}
  28. function xcShow(m) {
  29. xcXC(m, 'block', m+'c', m+'x');
  30. }
  31. function xcHide(m) {
  32. xcXC(m, 'none', m+'x', m+'c');
  33. }
  34. function xcXC(e, d, s, h) {
  35. e = document.getElementById(e);
  36. e.style.display = d;
  37. e.parentNode.replaceChild(xcNode[s], xcNode[h]);
  38. xcNode[s].firstChild.focus();
  39. }
  40. function xcCtrl(m, c, s, v, f, t) {
  41. var a = document.createElement('a');
  42. a.setAttribute('href', 'javascript:xc'+f+'(\''+m+'\');');
  43. a.setAttribute('title', t);
  44. a.appendChild(document.createTextNode(v));
  45. var d = document.createElement('div');
  46. d.className = c+s;
  47. d.appendChild(a);
  48. return xcNode[m+s] = d;
  49. }

function xcSet(m, c [, arguments])

Transforms <ul> elements into an expand/collapse list. Creates +/- controls with event triggers and adjusts classes to allow the menu style to be altered upon success.

m
String: id of the menu items’ parent in the HTML source.
c
String: class name applied to menu items.
[arguments]
Optional strings: ids of menu items that remain expanded.

function xcShow(m)

Expands a menu that is collapsed. Causes an error if the supplied id is not an collapsed menu.

m
String: id of menu item to show (expand).

function xcHide(m)

Collapses a menu that is expanded. Causes an error if the supplied id is not an expanded menu.

m
String: id of menu item to hide (collapse).

function xcXC(e, d, s, h)

Internal function used by xcShow and xcHide to manage menu expand/collapse behaviour. Toggles the menu and related +/- node.

e
Object: element to expand/collapse.
d
String: style.display value: 'block' or 'none'.
s
String: id of +/- node to display.
h
String: id of +/- node to hide.

function xcCtrl(m, c, s, v, f, t)

Internal function used by xcSet to create the +/- controls.

m
String: id of menu item.
c
String: class name for custom styles.
s
String: 'x' or 'c' suffix for node id and class name c.
v
String: control text value: '[+]' or '[-]'.
f
String: function name 'Show' or 'Hide' event trigger (xcShow or xcHide).
t
String: node’s title attribute.
[ inspire logo ]
Code in the javascript library is free to use. Enjoy! Feedback welcome.
© Ben Boyle 2003.