Resolved Header Spoiler [Archive]

Undisclosed

07-23-2012, 11:39 AM

I have a problem with this code.
The spoiler only expands if I click on its title (text). What I want to happen is for it to expand if I click the whole div (header) itself.

I tried different methods but it always ends in failure.
It's either clicking the div makes the header itself disappear, or clicking any headers makes only the first spoiler to expand.

<style type="text/css">
body,input{font-family:"Trebuchet ms",arial;font-size:12px; }
.spoiler{ background: #691816; border:1px solid #441f1e; padding-left:10px; border-radius: 3px; margin-bottom: 4px; box-shadow: 0 0 5px 2px #888; color: #fff;}
.spoiler:hover{background: #7d1e1a;}
.spoiler .inner { background: #fff; margin-left:-10px; color: #000;}
.spoiler .h2 {color: #eee; text-decoration:none; align:right; cursor: pointer;}
</style>

<script type="text/javascript">
function showSpoiler(obj)
{var inner = obj.parentNode.getElementsByTagName("div")[0];if (inner.style.display == "none")
inner.style.display = ""; else inner.style.display = "none";}
</script>

<div class="spoiler"">
<a type="button" onclick="showSpoiler(this);" class="h2">Testing</a>
<div class="inner" style="display:none;">
test</div>
</div>

<div class="spoiler"">
<a type="button" onclick="showSpoiler(this);" class="h2">Testing2</a>
<div class="inner" style="display:none;">
test2</div>
</div>

vwphillips

07-23-2012, 11:56 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
body,input{font-family:"Trebuchet ms",arial;font-size:12px; }
.spoiler{ background: #691816; border:1px solid #441f1e; padding-left:10px; border-radius: 3px; margin-bottom: 4px; box-shadow: 0 0 5px 2px #888; color: #fff;}
.spoiler:hover{background: #7d1e1a;}
.spoiler .inner { background: #fff; margin-left:-10px; color: #000;}
.spoiler .h2 {color: #eee; text-decoration:none; align:right; cursor: pointer;}
</style>

<script type="text/javascript">
function showSpoiler(obj){
var inner = obj.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = ""; else inner.style.display = "none";
}
</script>
</head>

<body>
<div class="spoiler" onclick="showSpoiler(this);">
<a type="button" class="h2">Testing</a>
<div class="inner" style="display:none;">
test</div>
</div>

<div class="spoiler" onclick="showSpoiler(this);" >
<a type="button" class="h2">Testing2</a>
<div class="inner" style="display:none;">
test2</div>
</div>
</body>

</html>