Javascript function instead of too many statements

JavaScript
1

java script

<script type="text/javascript">
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";
}
</script>

HTML

<div class="faredivwrap">
            <div class="farenav">
                <div onClick="show1()">book now 1</div>
                <div onClick="show2()">book now 2</div>
            </div>
            <div class="farecontent">
                <div id="1" style="display:none;">1 form display here</div>
                <div id="2" style="display:none;">2 form display here</div>
                
            </div>
        </div>

CSS

<style>
.faredivwrap{ 
    border:1px solid #000;
    background-color:#CCC;
    position:absolute;
}
.farenav{ position:relative; float:left; margin:5px;}
.farecontent{position:relative;float:left;margin:5px;}
.farenav div{ border:1px solid #000;}
.farecontent div{ border:1px solid #000; min-height:60px;}
</style>

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”;
}

2

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. :slight_smile:


<!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>
3

thanks … but again a question arise that … i have 5 div’s … this example works for just 2 div’s

4

Maybe this old jQuery code will help as a start? It works with unlimited “child nodes”.

$("<parent node selector here>").toggle(
	function () {
		$(this).css({"color":"#fff",
					"background-image":"url(./includes/plus-8.png)",
					"background-repeat": "no-repeat",
					"line-height": "8px"});
		$(this.childNodes).css({"display":"none"});
	},
	function () {
		$(this).css({"color":"#000",
					"background-image":"url(./includes/minus-8.png)",
					"background-repeat": "no-repeat",
					"line-height": "normal"});
		$(this.childNodes).css({"display":"inline"});
	}
);function init(){
	$("#toggle_ctrl").text('<expand all button text here>');
	$("#toggle_ctrl").css({"display":"block"});
	$("#toggle_ctrl").toggle(
		function(){
			$("#toggle_ctrl").text('<close all button text here>');
			$("<parent node selector here>").each( function() {
				if ( $(this).css('line-height') == '8px' )
				{
					$(this).trigger('click');
				}
			});
			$("<parent node selector here>").css({"color":"#000",
										"background-image":"url(./includes/minus-8.png)",
										"background-repeat": "no-repeat",
										"line-height": "normal"});
		},
		function () {
			$("#toggle_ctrl").text('<expand all button text here>');
			$("<parent node selector here>").each( function() {
				if ( $(this).css('line-height') == 'normal' )
				{
					$(this).trigger('click');
				}
			});
			$("<parent node selector here>").css({"color":"#fff",
										"background-image":"url(./includes/plus-8.png)",
										"background-repeat": "no-repeat",
										"line-height": "8px"});
		}
	);
	$("<parent node selector here>").trigger('click');
}
$(document).ready(function() {
	init();
});
5

Here is the same thing for 5 divs. The onclick handlers are now added dynamically. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta name="ProgId" content="FrontPage.Editor.Document" >
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>function to show 2</title>
<script type="text/javascript">
var currentIndex; // global
var allDivs=new Array(); // global 
 function init()
  { var i=0;
    allDivs[0]=null;
    for(i=1;i<6;i++)
     { allDivs[i]=document.getElementById("a"+i); 
     // add handlers 
      document.getElementById("n"+i).onclick=function(){ 
        if(currentIndex){allDivs[currentIndex].style.display="none"; }
        currentIndex=this.id.replace(/n/,"");
        setTimeout(function(){ allDivs[currentIndex].style.display="block";}, 100);    
    } } }
// -----  
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:300px; 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;  display:none; }
.blue { color:#00F; }
.red  { color:#F00; }

</style>
</head>

<body>

<div class="fareDivWrap">
  <div class="fareNav">
    <div id="n1">
      book now 1</div>
    <div id="n2">
      book now 2</div>
    <div id="n3">
      book now 3</div>
    <div id="n4">
      book now 4</div>
    <div id="n5">
      book now 5</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 id="a3" class="red">
      3 form display here</div>
    <div id="a4" class="blue">
      4 form display here</div>
    <div id="a5" class="red">
      5 form display here</div>
  </div>
</div>

</body>

</html>