Obracanie dwóch elementów widocznych / ukrytych w tym samym div
Mam problem z włączeniem jednego elementu i wyłączeniem drugiego elementu w tym samym div. Wygląda na to, że tworzę obiekt, który ma to robić, a kiedy go klikam, ukrywa cały div zamiast włączać i wyłączać jeden element. Co jeszcze muszę dodać, aby to działało?
CSS#test1 {
width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none;
}
#test2 {
width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block;
}
.mydiv {
}
#test {
width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;
}
#labor{
float:left; width:38px; height:125px;
}
#odc {
float:left; width:32px; height:125px;
}
HTML <div id="test">
<div class="mydiv" id="test1">
<script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
<div id="line3ChartContainer" style="display:normal">
<asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal></div>
</div>
<div class="mydiv" id="test2">
<script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
<div id="popChartContainer" style="display:normal">
<asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal></div>
</div>
</div>
<img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/>
<img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3ChartDiv.visibility='false';"/>
Mam nadzieję, że to lepiej wygląda.