www.webdeveloper.com
Results 1 to 3 of 3

Thread: javascript function instead of too many statements

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    javascript function instead of too many statements

    javascript
    <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>

    this is my 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>

    this is my HTML code
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I'm struggling to find a question here... What is it that you need help with exactly?
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Oct 2013
    Posts
    483
    One idea:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Choose Fare</title>
    
    <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>
    
    <script type="text/javascript">
    function show(el){
       switch(el.value){
         case '1':
    		document.getElementById(1).style.display="block";
    		document.getElementById(2).style.display="none";
    		break;
         case '2':
    		document.getElementById(1).style.display="none";
    		document.getElementById(2).style.display="block";
    		break;
         default:
    		document.getElementById(1).style.display="none";
    		document.getElementById(2).style.display="none";
    		break;
    	}
    }
    </script>
    
    </head>
    
    <body>
    
    <div class="faredivwrap">
      <div class="farenav">
    	<input type="radio" name="choosefare" value="1" onclick="show(this)" /> book now 1<br />
    	<input type="radio" name="choosefare" value="2" onclick="show(this)" /> book now 2
      </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>
    
    </body>
    </html>
    Last edited by Kevin2; 03-11-2014 at 01:14 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles