I’m trying to simulate the div toggle from http://maps.live.com; “Business | People | Collections | Locations” (in the top left of the page). When an href is clicked, it toggles the corresponding div and the href stays active.
I’m struggling with a few items. The requirements I’m missing include: having default visible at page load divSrchMapRslt and divSrchMap, as well as the ‘Search Map’ link to look active or on. Actually, none of my links hold an active looking state when the corresponding divs are visible. Any suggestions?
Please see below:
<head>
<style>
.btnSearch a:link
{
color: black;
padding: 5px;
background-color: red;
border: 1px solid black;
}
.btnSearch a:hover
{
color: black;
padding: 5px;
background-color: yellow;
border: 1px solid black;
}
.btnSearch a:active
{
color: black;
padding: 5px;
background-color: orange;
border: 1px solid black;
}
</style>
<script type="text/javascript">
<!--
function switchSearch(id) {
if (document.getElementById) {
var srchTyp = document.getElementById(id);
srchTyp.style.display = (srchTyp.style.display == 'block') ? 'none' : 'block';
}
}
function hideMenu(id) {
if (document.getElementById) document.getElementById(id).style.display = 'none';
}
//-->
</script>
</head>
<body>
<div class="btnSearch">
<a href="" onclick="switchSearch('divSrchMap'); switchSearch('divSrchMapRslt'); return(false);" onblur="hideMenu('divSrchMap'); hideMenu('divSrchMapRslt');">Search Map</a><br />
<a href="" onclick="switchSearch('divSrchCmty'); switchSearch('divSrchCmtyRslt'); return(false);" onblur="hideMenu('divSrchCmty'); hideMenu('divSrchCmtyRslt');">Find Communities</a><br />
<a href="" onclick="switchSearch('divSrchCrd'); switchSearch('divSrchCrdRslt'); return(false);" onblur="hideMenu('divSrchCrd'); hideMenu('divSrchCrdRslt');">Coordinates</a><br />
</div>
<div id="divSrchMap" style="display:none;">div 1a</div>
<div id="divSrchCmty" style="display:none;">div 2a</div>
<div id="divSrchCrd" style="display:none;">div 3a</div>
<br/>
<div id="divSrchMapRslt" style="display:none;">div 1b</div>
<div id="divSrchCmtyRslt" style="display:none;">div 2b</div>
<div id="divSrchCrdRslt" style="display:none;">div 3b</div>
</body>
