Need some help. This seem like a simple piece of code, but I am stumped as to why things are not properly working. The onClick events showdiv(n) works just fine. But the onClick event hidediv() does not. What's weird is that if I type "hidediv(1)" on the Firebug console, the javascript statement works just fine. But the js code is not executed when the div the event is attached to is clicked on. Here's the code:
<script type="text/javascript">
function showdiv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_v");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_v");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_v");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_v");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_v");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_v");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_v");
break;}}
function hidediv(n){
switch(n){
case 1:
var div = document.getElementById("menucontent");
div.setAttribute("class","menucontent_h");
break;
case 2:
var div = document.getElementById("biographycontent");
div.setAttribute("class","biographycontent_h");
break;
case 3:
var div = document.getElementById("productscontent");
div.setAttribute("class","productscontent_h");
break;
case 4:
var div = document.getElementById("thankyoucontent");
div.setAttribute("class","thankyoucontent_h");
break;
case 5:
var div = document.getElementById("specialscontent");
div.setAttribute("class","specialscontent_h");
break;
case 6:
var div = document.getElementById("contactcontent");
div.setAttribute("class","contactcontent_h");
break;
case 7:
var div = document.getElementById("gallerycontent");
div.setAttribute("class","gallerycontent_h");
break;}}
</script>
</head>
<body>
<div id="background" class="containerbg">
<img id="background" src="background.jpg" class="bgimg">
</div>
<div id="menuofservices" class="menuofservices" onClick="showdiv(1);"></div>
<div id="menucontent" class="menucontent_h">
<div id="goawaymenu" class="goaway" onClick="hidediv(1);"><img src="closex.jpg" width="30px" height="30px"></div>
<div id="menutitle" class="menutitle"><h2>Menu of Services</h2></div>
<div id="menutext" class="menutext"><p>
<table width="270">
<tr>
<td><strong>Cuts</strong></td>
<td></td>
</tr>
<tr>
<td>Women</td>
<td>$30</td>
</tr>
<tr>
<td>Boys</td>
<td>$15</td>
</tr>
<tr>
<td>Girls (12 & under)</td>
<td>$20</td>
</tr>
<tr>
<td>Bang trim</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Color</strong></td>
<td></td>
</tr>
<tr>
<td>All over</td>
<td>$50</td>
</tr>
<tr>
<td>Retouch</td>
<td>$45</td>
</tr>
<tr>
<td>Full Highlight</td>
<td>$68</td>
</tr>
<tr>
<td> additional color</td>
<td>$5</td>
</tr>
<tr>
<td>Partial Highlight</td>
<td>$52</td>
</tr>
<tr>
<td>Simple Highlight (per foil)</td>
<td>$5</td>
</tr>
<tr>
<td>Men's Color</td>
<td>$24</td>
</tr>
<tr>
<td>Retouch & Highlight</td>
<td>$75</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Wax</strong></td>
<td></td>
</tr>
<tr>
<td>Eyebrow</td>
<td>$12</td>
</tr>
<tr>
<td>Lip</td>
<td>$7</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Makeup</strong></td>
<td></td>
</tr>
<tr>
<td>Application & Lesson</td>
<td>$40</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Misc</strong></td>
<td></td>
</tr>
<tr>
<td>Shampoo & Style</td>
<td>$16</td>
</tr>
<tr>
<td>Shampoo & Flatiron</td>
<td>$21</td>
</tr>
<tr>
<td>Deep Conditioning Treatment</td>
<td>$15</td>
</tr>
<tr>
<td>Updo</td>
<td>$45</td>
</tr>
</table>
</p>
</div>
</div>
Everything seems to render OK, but the event does not fire and I'm at a total loss as to why.
Here's the CSS:
@charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 768px;
width: 1024px;
}
.containerbg {
position: absolute;
height: 768px;
width: 1024px;
z-index: 0;
}
.bgimg {
height: 768px;
width: 1024px;
}
.goaway {
top: 10px;
right: 10px;
width: 30px;
height: 30px;
z-index: 3;
cursor: pointer;
position: absolute;
}
.menuofservices {
position: absolute;
border: thin solid #000;
height:86px;
width:257px;
left: 600px;
top: 560px;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.menucontent_h {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menucontent_v {
position: absolute;
border: thin solid #780C19;
height: 600px;
width: 300px;
left: 360px;
top: 100px;
opacity: 1.0;
z-index: 2;
font-size: 11px;
background-color: #dc7c87;
text-align: left;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}
.menutitle{
position: absolute;
text-align: center;
width: 300px;
height: 50x;
z-index: 3;
top: 0px;
left: 0px;
}
.menutext{
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 500px;
z-index: 3;
background-color: #dc7c87;
text-align: left;
}
