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. */
6. var xcNode = [];
8. function xcSet(m, c) {
9. if (document.getElementById && document.createElement) {
10. m = document.getElementById(m).getElementsByTagName('ul');
11. var d, p, x, h, i, j;
12. for (i = 0; i < m.length; i++) {
13. if (d = m[i].getAttribute('id')) {
14. xcCtrl(d, c, 'x', '[+]', 'Show', m[i].getAttribute('title')+' (expand menu)');
15. x = xcCtrl(d, c, 'c', '[-]', 'Hide', m[i].getAttribute('title')+' (collapse menu)');
17. p = m[i].parentNode;
18. if (h = !p.className) {
19. j = 2;
20. while ((h = !(d == arguments[j])) && (j++ < arguments.length));
21. if (h) {
22. m[i].style.display = 'none';
23. x = xcNode[d+'x'];
24. }
25. }
27. p.className = c;
28. p.insertBefore(x, p.firstChild);
29. }
30. }
31. }}
34. function xcShow(m) {
35. xcXC(m, 'block', m+'c', m+'x');
36. }
39. function xcHide(m) {
40. xcXC(m, 'none', m+'x', m+'c');
41. }
44. function xcXC(e, d, s, h) {
45. e = document.getElementById(e);
46. e.style.display = d;
47. e.parentNode.replaceChild(xcNode[s], xcNode[h]);
48. xcNode[s].firstChild.focus();
49. }
52. function xcCtrl(m, c, s, v, f, t) {
53. var a = document.createElement('a');
54. a.setAttribute('href', 'javascript:xc'+f+'(\''+m+'\');');
55. a.setAttribute('title', t);
56. a.appendChild(document.createTextNode(v));
58. var d = document.createElement('div');
59. d.className = c+s;
60. d.appendChild(a);
62. return xcNode[m+s] = d;
63. }

---

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.

Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.