<html>
<head></head>
<body>
<strong>Why doesn't this work?</strong><br /><br />
<div style="margin-bottom:2px">
Spoiler:
<input type="button" value="Display" style="width:65px;font-size:10px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Display';
}">
</div>
<div style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
Spoiler!<br />
<br />
Spoiler!<br />
<br />
Spoiler!
</div>
</div>
<br /><br />
<div style="margin-bottom:0px">
Spoiler:
<input type="button" value="Display" style="width:65px;font-size:10px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display = 'none';
this.innerText = ''; this.value = 'Display';
}">
</div1>
<div1 style="margin: 0px; padding: 6px; border: 1px inset;">
<div1 style="display: none;">
<br />
<br />
<br />
<br />
Spoiler2!
</div1>
</div>
</body>
</html>
The first spoiler bar opens and closes correctly, but then the second one doesn't open at all?
http://www.youtube.com/watch?v=5WkLhA_kKcY
<head></head>
<body>
<strong>Why doesn't this work?</strong><br /><br />
<div style="margin-bottom:2px">
Spoiler:
<input type="button" value="Display" style="width:65px;font-size:10px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'Display';
}">
</div>
<div style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
Spoiler!<br />
<br />
Spoiler!<br />
<br />
Spoiler!
</div>
</div>
<br /><br />
<div style="margin-bottom:0px">
Spoiler:
<input type="button" value="Display" style="width:65px;font-size:10px;margin:0px;padding:0px;"
onclick="if (this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display != '')
{
this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div1')[1].getElementsByTagName('div1')[0].style.display = 'none';
this.innerText = ''; this.value = 'Display';
}">
</div1>
<div1 style="margin: 0px; padding: 6px; border: 1px inset;">
<div1 style="display: none;">
<br />
<br />
<br />
<br />
Spoiler2!
</div1>
</div>
</body>
</html>
The first spoiler bar opens and closes correctly, but then the second one doesn't open at all?
http://www.youtube.com/watch?v=5WkLhA_kKcY