Menu
I have tabs built purely based on css. I want to be able to show/hide these tabs based on a dropdown value selected. I was able to do this, but for one thing! If I have 3 tabs and want to show tab 1 & tab 3, how can I make tab3 to take the position of tab2 instead of having an empty space for tab2?
Here’s my code:
<html>
<head>
<title>Untitled</title>
<style type=”text/css”>
body {
margin-left: 15px;
margin-right: 15px;
padding: 0px;
font-family: verdana, Arial, Helvetica, sans-serif;
}
#tabmenu {
color: #CCDAEA;
border-bottom: 2px solid #3A68A1;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 15px;
}
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a {
color: #CCDAEA;
background: #3A68A1;
font: bold 0.6em verdana, Arial, sans-serif;
border: 2px solid #3A68A1;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a:visited {
color: #CCDAEA; }
#tabmenu a.active {
background: #CCDAEA;
border-bottom: 3px solid #CCDAEA;
color: #3A68A1;
}
#tabmenu a.active:visited {
color: #3A68A1; }
</style>
<script type=”text/javascript”>
function showTab2()
{
var Selbox1 = document.forms[0].tab2; /* This is for loan
var opt1 = Selbox1.options[Selbox1.selectedIndex].text;
if (opt1 == “Yes”)
{
document.all.t2.style.visibility = “visible”;
}
else
{
document.all.t2.style.visibility = “hidden”;
}
}
function showTab3()
{
var Selbox1 = document.forms[0].tab3;
var opt1 = Selbox1.options[Selbox1.selectedIndex].text;
if (opt1 == “Yes”)
{
document.all.t3.style.visibility = “visible”;
}
else
{
document.all.t3.style.visibility = “hidden”;
}
}
</script>
</head>
<body>
<ul id=”tabmenu”>
<li id=”t1″ style=”visibility:visible”><a href=”#”>Home</a></li>
<li id=”t2″ style=”visibility:hidden”><a href=”#”>Customer</a></li>
<li id=”t3″ style=”visibility:hidden”><a href=”#”>Product</a></li>
</ul>
<form>
Customer: <select name=”tab2″ onChange=”showTab2();”>
<option>Select a value</option>
<option>Yes</option>
<option>No</option>
</select>
Product: <select name=”tab3″ onChange=”showTab3();”>
<option>Select a value</option>
<option>Yes</option>
<option>No</option>
</select>
</form>
</body>
</html>
Here,
1. Select “Yes” form customer dropdown and the customer tab will appear2. Select “Yes” from product dropdown and the product tab will appear3. Now select “No” from customer dropdown, I want the product tab to move to its left and take the position of customer tab instead of having an empty space
Thanks Much