Menu
In the following code, all displays toggle with clicking on the up/down arrows
EXCEPT the first one. It does not toggle correctly. It closes the opened text, but does not open it when closed.
I’ve been staring at this too long. Can anyone spot my mistake?
I think it is in the ‘toggleAll’ function.
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Toggle List </title>
<style type=”text/css”>
#ulDiv { width:500px; }
ul { color: blue; list-style-type: none; }
li p { padding-left: 2em; display:none; }
.arrow { color:blue; background-Color:lightgreen; cursor:pointer; font-size:1.5em; }
</style>
</head>
<body>
<div id=”ulDiv”>
<ul>
<li><span class=”arrow” id=”toggleAllBtn”>▼</span> Toggle All <p></p></li>
<li><span class=”arrow”>▼</span> Test 1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.
</p></li>
<li><span class=”arrow”>▼</span> Test 2
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt.
</p></li>
<li><span class=”arrow”>▼</span> Test 3
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.
</p></li>
</ul>
</div>
<script type=”text/javascript”>
// Idea from: http://stackoverflow.com/questions/868407/hide-an-elements-next-sibling-with-javascript
window.onload = function() {
var sel = document.getElementsByClassName(‘arrow’); var x;
for (var i=0; i<sel.length; i++) {
sel[i].value = ‘▼’;
sel[i].onclick = function() { toggleArrow(this); }
x = sel[i].nextElementSibling; x.style.display = ‘none’;
}
sel[0].onclick = function() { toggleAll(); }
}
function toggleArrow(info) {
info.value = (info.value == ‘▼’) ? ‘▲’ : ‘▼’; info.innerHTML = info.value;
var x = info.nextElementSibling;
if (x.style.display == ‘none’) { x.style.display = ‘block’; } else { x.style.display = ‘none’; }
}
/* */
function toggleAll() {
var sel = document.getElementsByClassName(‘arrow’);
var x = sel[0].value;
if (x == ‘▼’) { x = ‘▼’; } else { x = ‘▲’; }
var y;
for (var i=0; i<sel.length; i++) {
sel[i].value = x; // alert(x);
sel[i].innerHTML = x;
y = sel[i].nextElementSibling;
if (x == ‘▼’) { y.style.display = ‘none’; } else { y.style.display = ‘block’; }
}
}
/* */
</script>
</body>
</html>