PDA

Click to See Complete Forum and Search --> : Box Toggler: Help

johnnyjava
10-28-2006, 02:47 PM
Can anyone tell me what is wrong with my code? The boxes are supposed to collapse when clicked on. Thank you.

<html>

<head>

<style type="text/css">

body { font: 11px sans-serif }

.boxhead { width:180px; padding: 2px 10px;
background-color:#999; border: 1px solid
#999; margin-bottom: 0; cursor: pointer;
font-weight: bold; }

.box_visible { width:180px; padding: 5px
10px; border: 1px solid #999; margin-top: 0; }

.box_hidden { display: none; }

</style>

<script type="text/javascript">

</head>

<body>

function toggleBox(id)
{
if(!document.getElementById) return;

var box = document.getElementById(id);

if(box.className == "box_hidden") box.className = 'box_visible';

else box.className = 'box_hidden';
}

</script>


<p onclick = "toggleBox('box1')"
class="boxhead"> Box 1 </p>

<p id="box1" class="box_visible">
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here</p>

<p onclick = "toggleBox('box2')"
class="boxhead"> Box 2 </p>

<p id="box2" class="box_visible">
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here
Put a bunch of text in here</p>

</body>

</html>
BuilderQ
10-28-2006, 03:03 PM
When using if...else statements in JavaScript, don't forget the braces:
if(condition) {action}
else {other action}
Orc Scorcher
10-28-2006, 03:14 PM
Your </head> and <body> tags are inside your <script> tag.
johnnyjava
10-28-2006, 05:02 PM
Thanks for the help.