JavaScript Show/Hide

**garrensilverwing** · 10-04-2009 10:01 PM

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 Code:

<!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** · 10-05-2009 02:58 PM

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/t...container.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 Code:

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

**garrensilverwing** · 10-05-2009 07:13 PM

ah ok thanks very much, i had a similar thing going but my syntax was way off lol

**diabolo** · 10-05-2009 07:39 PM

I would also suggest using jQuery. I'm no expert at it, not even at javascript, but I was able to make a couple div slide open and close on a click

www.jquery.com
http://www.learningjquery.com/2006/0...show-and-hide#

Thread: JavaScript Show/Hide

LinkBack

Thread Tools

Display

JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Similar Threads

Checking if a file(url) exists using Javascript (AJAX)

Making a site JavaScript dependent - pros/cons?

drop down menus with JavaScript disabled?

javascript and external javascript files problem

XML and Javascript

Posting Permissions