https://earthref.org/js/z-hide-div.js

1/***************************************************************/
2/*** javascript for hiding and showing divs on web pages     ***/
3/***************************************************************/
4
5/***************************************************************/
6/*** this file also requires that the javaScript file        ***/
7/*** z-browser.js has been loaded before it                  ***/
8/***************************************************************/
9
10/****************************/
11/*** initialize variables ***/
12/****************************/
13
14// down and up icons
15var plus  = new Image();
16var minus = new Image();
17plus.src = '../images/buttons/plus.very.flat.gif';
18minus.src   = '../images/buttons/minus.very.flat.gif';
19
20// hide detail and show all image buttons
21var hidedivs  = new Image();
22var showdivs  = new Image();
23hidedivs.src  = '../images/buttons/hidedetail.highlight.nav.gif';
24showdivs.src  = '../images/buttons/showall.highlight.nav.gif';
25
26/************************************************************/
27/*** display an individual div by toggling its visibility ***/
28/************************************************************/
29
30function displayDiv(my_div) {
31
32	// doesn't work for IE4 and NS6
33	if (!ie4 && !ns6) return;
34
35	// set image name
36	var img_name = my_div + "_arrow";
37
38	// hide div if currently displayed
39	if (document.getElementById(my_div).style.display=="" || document.getElementById(my_div).style.display=="block") {
40		document.getElementById(my_div).style.display = "none";
41		if (document.images[img_name]) {
42			document.images[img_name].src = downarrow.src;
43			document.images[img_name].alt = "Click to expand"; } }
44
45	// show div if not currently displayed
46	else {
47		document.getElementById(my_div).style.display = "block";
48		if (document.images[img_name]) {
49			document.images[img_name].src = uparrow.src;
50			document.images[img_name].alt = "Click to collapse"; } }
51
52	// finish
53	return true;
54
55}
56
57/***************************************************/
58/*** display all divs by toggling its visibility ***/
59/***************************************************/
60
61function displayAllDivs() {
62
63	// hide all divs if actually clicking the wrong button
64	if (document.images['show_details'].src == hidedivs.src) return hideAllDivs();
65
66	// get all div objects
67	var divs = document.getElementsByTagName('div');
68
69	// show all divs on this html page
70	for (var i = 0; i < divs.length; i++) divs[i].style.display = "block";
71
72	// change the image to hide details again
73	document.images['show_details'].src = hidedivs.src;
74
75	// finish
76	return true;
77
78}
79
80/************************************************/
81/*** hide all divs by toggling its visibility ***/
82/************************************************/
83
84function hideAllDivs() {
85
86	// show all div's if actually clicking the wrong button
87	if (document.images['show_details'].src == showdivs.src) return displayAllDivs();
88
89	// get all div objects
90	var divs = document.getElementsByTagName('div');
91
92	// hide all divs on this html page
93	for (var i = 0; i < divs.length; i++) {
94		if (divs[i].id && divs[i].id.match(/_div/))
95			divs[i].style.display = "none";	}
96
97	// change the image to show all again
98	document.images['show_details'].src = showdivs.src;
99
100	// finish
101	return true;
102
103}
104
105/******************************************************************/
106/*** display an individual panel div by toggling its visibility ***/
107/*** and hide all other div's on the page                       ***/
108/******************************************************************/
109
110function displayPanelDiv(my_div) {
111
112	// doesn't work for IE4 and NS6
113	if (!ie4 && !ns6) return;
114
115	// exit if panel div is not defined yet or div is already visible
116	if (!document.getElementById(my_div) || document.getElementById(my_div).style.display == "block") return;
117
118	// get all div objects
119	var divs = document.getElementsByTagName('div');
120
121	// hide all div's except the one we need to display
122	for (var i = 0; i < divs.length; i++) {	if (divs[i].id && divs[i].id.match(/panel_/)) { divs[i].style.display = "none"; } }
123
124	// show div if currently not displayed
125	document.getElementById(my_div).style.display = "block";
126
127	// finish
128	return true;
129
130}
131
132/**************************************************************************/
133/*** display or hide an individual panel div by toggling its visibility ***/
134/**************************************************************************/
135
136function divToggle(my_div,img_name,open_img,close_img) {
137
138	// doesn't work for IE4 and NS4
139	if (!document.getElementById(my_div)) return;
140
141	// hide div if currently displayed
142	if (document.getElementById(my_div).style.display=="" || document.getElementById(my_div).style.display=="block") {
143		document.getElementById(my_div).style.display = "none";
144		if (document.images[img_name]) {
145			document.images[img_name].src = open_img;
146			document.images[img_name].alt = "Click to expand"; } }
147
148	// show div if not currently displayed
149	else {
150		document.getElementById(my_div).style.display = "block";
151		if (document.images[img_name]) {
152			document.images[img_name].src = close_img;
153			document.images[img_name].alt = "Click to collapse"; } }
154
155	// finish
156	return true;
157
158}
159
160/*********************/
161/*** end of coding ***/
162/*********************/