JavaScript Show/Hide

garrensilverwing

garrensilverwing

New Member
Messages
148
Reaction score
0
Points
0
Hi guys. I am working on creating an online store type program for practice and I want to create a page where people can go in and edit the store by adding/removing items and changing the color schemes. I know this part of the program will be javascript heavy considering what i want it to do. Anyway I am stuck here on this part because I am pretty bad at javascript. What I want to do is make it so there are three tabs at the top of the divs and when they click on one of the tabs the corresponding div becomes visible, the other two divs become hidden and the tabs change to match (the clicked one gets a white background and loses the border-bottom). I was close with my javascript attempts but I am getting frustrated, please help! :)

here is the code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit</title>
<style type="text/css">
    .Wrapper {position: relative; margin-right: auto; margin-left: auto; width: 500px;}
    .ChangesTable {width: 100%; margin: none; padding: none; border-collapse: collapse;}
    .AddItems {background: #FFF; border-bottom: none; border-top: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .RemoveItems {background: #D3D3D3; border-bottom: 1px #686868 solid; border-top: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .ColorScheme {background: #D3D3D3; border-bottom: 1px #686868 solid; border-top: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .DivAddItems {padding: 10px; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .DivRemoveItems {padding: 10px; display:none; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .DivColorScheme {padding: 10px; display:none; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
</style>
</head>
<body>
<div name="Wrapper" class="Wrapper">
    <table name="ChangesTable" class="ChangesTable">
        <tr>
            <td name="AddItems" class="AddItems">Add Items</td>
            <td name="RemoveItems" class="RemoveItems">Remove Items</td>
            <td name="ColorScheme" class="ColorScheme">Color Scheme</td>
        </tr>
    </table>
    <div name="DivAddItems" class="DivAddItems">
        <form method="post" action="AddItems.php">
            <label>Item Name</label><br /><input name="ItemName" type="text" /><br />
            <label>Price</label><br /><input name="ItemCost" type="text" /><br />
            <label>Brief Description</label><br /><textarea name="ItemDescription"></textarea><br />
        </form>
    </div>
    <div name="DivRemoveItems" class="DivRemoveItems">
    </div>
    <div name="DivColorScheme"  class="DivColorScheme">
    </div>
</div>
</body>
</html>
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
One: You could look into some free scripts and see how others do it

http://www.barelyfitz.com/projects/tabber/

Two: You could use a JavaScript toolkit like Dojo and use their widgets like I did:

http://brightbeauty.x10hosting.com/test/tabcontainer.html

Three: Hack your code into working like I did:

http://brightbeauty.x10hosting.com/abc.html

Some points: you have to give your items id's. That is how you look them up. (document.getElementById) and manipulate their appearance by their 'style' attribute.

The 'label' tag should have a for="someId" attribute that ties the label to the input field. That way, when you click on the label, the field will get focus. Your use of 'label' does nothing.


My hack of your page, ask any questions about it:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit</title>
<style type="text/css">
    .Wrapper {position: relative; margin-right: auto; margin-left: auto; width: 500px;}
    .ChangesTable {width: 100%; margin: none; padding: none; border-collapse: collapse;}
    
    .activeTab {   background: #FFF;    border-bottom: none;              border-top: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .inactiveTab {background: #D3D3D3; border-bottom: 1px #686868 solid; border-top: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
       
    .DivAddItems {padding: 10px; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .DivRemoveItems {padding: 10px; display:none; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
    .DivColorScheme {padding: 10px; display:none; left: -1px; border-collapse: collapse; position:relative; width: 479px; border-bottom: 1px #686868 solid; border-right: 1px #686868 solid; border-left: 1px #686868 solid;}
</style>

<script type="text/javascript">



   var current_tab = 'add' ;
   function addClicked(  ){
      if( current_tab == 'add' ){ return ; }
      document.getElementById('add').style.display = 'block' ;
      document.getElementById(current_tab).style.display = 'none' ;
      document.getElementById("AddItems").className = 'activeTab' ;
      document.getElementById("RemoveItems").className = 'inactiveTab' ;
      document.getElementById("ColorScheme").className = 'inactiveTab' ;
      current_tab = 'add' ;

   };
   function removeClicked(  ){
      if( current_tab == 'remove' ){ return ; }
      document.getElementById('remove').style.display = 'block' ;
      document.getElementById(current_tab).style.display = 'none' ;
      document.getElementById("AddItems").className = 'inactiveTab' ;
      document.getElementById("RemoveItems").className = 'activeTab' ;
      document.getElementById("ColorScheme").className = 'inactiveTab' ;
      current_tab = 'remove' ;

   };
   function colorClicked(  ){
      if( current_tab == 'color' ){ return ; }
      document.getElementById('color').style.display = 'block' ;
      document.getElementById(current_tab).style.display = 'none' ;
      document.getElementById("AddItems").className = 'inactiveTab' ;
      document.getElementById("RemoveItems").className = 'inactiveTab' ;
      document.getElementById("ColorScheme").className = 'activeTab' ;
      current_tab = 'color' ;


  };

   function  init(){
       document.getElementById('AddItems').onclick = addClicked ;
       document.getElementById('RemoveItems').onclick = removeClicked ;
       document.getElementById('ColorScheme').onclick = colorClicked ;

   };

   window.onload = init;  
</script>
</head>
<body>
<div name="Wrapper" class="Wrapper">
    <table name="ChangesTable" class="ChangesTable">
        <tr> 
            <td name="AddItems"    class="activeTab"    id='AddItems'    >Add Items</td>
            <td name="RemoveItems" class="inactiveTab" id="RemoveItems" >Remove Items</td>
            <td name="ColorScheme" class="inactiveTab" id="ColorScheme" >Color Scheme</td>
        </tr>
    </table>
    <div name="DivAddItems" class="DivAddItems" id="add" >
        <form method="post" action="AddItems.php">
            <label>Item Name</label><br /><input name="ItemName" type="text" /><br />
            <label>Price</label><br /><input name="ItemCost" type="text" /><br />
            <label>Brief Description</label><br /><textarea name="ItemDescription"></textarea><br />
        </form>
    </div>
    <div name="DivRemoveItems" class="DivRemoveItems" id="remove">
        <h1>REMOVE ITEMS FORM</h1>
    </div>
    <div name="DivColorScheme"  class="DivColorScheme" id="color">
       <h1>COLOR SCHEME FORM</h1>
    </div>
</div>
</body>
</html>
 
You must log in or register to reply here.
Top