i need a function
like
show();
it takes argument…
and works instead of
function show1(){
document.getElementById(1).style.display=“”;
document.getElementById(2).style.display=“none”;
}
function show2(){
document.getElementById(2).style.display=“”;
document.getElementById(1).style.display=“none”;
}
I need a function like show(); that takes arguments.
Here is a script that uses one show() function to operate both divs. I left your inline onclick handlers to make this as close to your original structure as I could.
A few points to remember for next time, your id references should start with an alpha character - “a1” not “1” and the opposite to display=“none” is display=“block” not display=“”. If you are going to float left you don’t need to use position relative in your CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>function to show</title>
<script type="text/javascript">
var thisIndex; // global
function show(indx){
thisIndex=indx;
// toggle indx
var disp=(indx==1)? 2 : 1;
// div that is not clicked
allDivs[disp].style.display="none";
// small delay to show change
setTimeout(function(){allDivs[thisIndex].style.display="block";}, 100);
}
// ------
var allDivs=new Array(); // global
function init()
{ allDivs[0]=null;
allDivs[1]=document.getElementById("a1");
allDivs[1].style.display="none";
allDivs[2]=document.getElementById("a2");
allDivs[2].style.display="none";
}
// -----
window.onload=init;
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
.fareDivWrap { position:relative; top:0px; left:0px; margin-left:20px; width:300px; height:90px; border:1px solid #000; background-color:#EEE; }
.fareNav { float:left; margin:5px; width:90px; }
.fareNav div { cursor:pointer; margin-bottom:5px; height:20px; padding:5px; border:1px solid #000; background-color:#CCC; }
.fareContent { float:left; margin:5px;}
.fareContent div { border:1px solid #000; height:50px; padding:10px; background-color:#FFF; }
.blue { color:#00F; }
.red { color:#F00; }
</style>
</head>
<body>
<div class="fareDivWrap">
<div class="fareNav">
<div onclick="show(1)">book now 1</div>
<div onclick="show(2)">book now 2</div>
</div>
<div class="fareContent">
<div id="a1" class="red">1 form display here</div>
<div id="a2" class="blue">2 form display here</div>
</div>
</div>
</body>
</html>