Back To Website Design Forum

Show/hide column

  • Nina07
  • Born
  • Born
  • No Avatar
  • Joined: Jun 16, 2010
  • Posts: 2
  • Status: Offline

Post June 21st, 2010, 2:49 am

Hi,

this is an example of the website i'm working on:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="NL">
<head><title>
    Tooling
</title>
 
  
  <script type="text/javascript" src="/scripts/swfobject.js"></script>
  <script type="text/javascript" src="/scripts/showpic.js"></script>
  <script type="text/javascript">function toggle(id) {
 var e = document.getElementById(id);

 if (e.style.display == '')
  e.style.display = 'none';
 else
  e.style.display = '';
}

</script>
<script language="JavaScript" type="text/javascript">
<!--

function AddRemoveCol(id, ar){
var rows=document.getElementById(id).getElementsByTagName('TR');
var zxc0,zxc2,zxccols;
for (zxc0=0;zxc0<rows.length;zxc0++){
 cols=rows[zxc0].getElementsByTagName('TD');
 colsnu=cols.length-1
 for (zxc1=0;zxc1<=colsnu;zxc1++){
  if (!cols[zxc1].set){ cols[zxc1].set='X'; }
  if(cols[zxc1].style.display=='none'&&ar){
  cols[zxc1].style.display='';
  cols[zxc1].set='show';
  break;
  }
  if(cols[colsnu-zxc1].style.display==''&&!ar&&cols[colsnu-zxc1].set=='show'){
  cols[colsnu-zxc1].style.display='none';
  cols[colsnu-zxc1].set='hide';
  break;
  }
 }

}
}
//-->
</script>
</head>


<body>
                        
<div class="inhalt"><a href="#self" onclick="toggle('box')" class="style3"><span class="subtitle">Availability</span></a>
<div id="box"style="display:none"><p class="style2"><strong>This article is available</strong></p>
    <table style="width: 100%">
        <tr>
            <td style="width: 386px"><em>Packaging</em></td>
            <td><em>Price</em></td>
        </tr>
        <tr>
            <td style="width: 386px">20 pieces</td>
            <td>€1.73</td>
        </tr>
        </table><br/>
    
        
    </div>
        </div>

<div class="inhalt"><a href="#self" onclick="toggle('box1')" class="style3"><span class="subtitle">Stock</span></a><div id="box1"style="display:none">
<p ><span class="bold">The following colours are in stock</span></p>
<table style="width: 100%">
        <tr>
            <td style="width: 386px"><em>Color</em></td>
            <td><em>Location</em></td>
        </tr>
        <tr>
            <td style="width: 386px">00</td>
            <td>&nbsp;</td>
        </tr>
        </table>
    <br/>
    
        </div>

    </div>  
    <div class="inhalt">
<a href="#self" onclick="toggle('box3')" class="style3"><span class="subtitle">Composition</span></a>
<div id="box3" style="display:none"><p ><span class="bold">Articles (Inclusive)</span></p>

    <table id='id_of_table'style="width: 613px">
        <tr>
            <td style="width: 12px; height: 17px;"><em>N°</em></td>
            <td style="display:none; height: 17px;" style="width: 102px"><em>Drawing</em></td>
            <td style="width: 63px; height: 17px;"><em>Article</em></td>
            <td style="width: 65px; height: 17px;"><em>Quantity</em></td>
            <td style="width: 202px; height: 17px;"><em>Description</em></td>
            <td style="width: 298px; height: 17px;"><em>Material</em></td>
            <td style="width: 217px; height: 17px;"><em>Tolerance</em></td>
        </tr>
        <tr>
            <td style="width: 12px; height: 15px;" valign="top"></td>
            <td style="display:none; height: 15px;" style="width: 102px; height: 15px;" valign="top">
            <img height="90" src="images/06577053_182429.png" width="47" /></td>
            <td style="width: 63px; height: 15px;" class="copyblue" valign="top">
            </td>
            <td style="width: 65px; height: 15px;" valign="top"></td>
            <td style="width: 202px; height: 15px;" valign="top"></td>
            <td style="width: 298px; height: 15px" valign="top"></td>
            <td style="width: 217px; height: 15px" valign="top"></td>
        </tr>
        </table>
        <a href="#self" onClick= "AddRemoveCol('id_of_table', true);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a>
        <a href="#self" onClick= "AddRemoveCol('id_of_table',false);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a><br/>
            </div></div>

</body>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  2. <html lang="NL">
  3. <head><title>
  4.     Tooling
  5. </title>
  6.  
  7.   
  8.   <script type="text/javascript" src="/scripts/swfobject.js"></script>
  9.   <script type="text/javascript" src="/scripts/showpic.js"></script>
  10.   <script type="text/javascript">function toggle(id) {
  11.  var e = document.getElementById(id);
  13.  if (e.style.display == '')
  14.   e.style.display = 'none';
  15.  else
  16.   e.style.display = '';
  17. }
  19. </script>
  20. <script language="JavaScript" type="text/javascript">
  21. <!--
  23. function AddRemoveCol(id, ar){
  24. var rows=document.getElementById(id).getElementsByTagName('TR');
  25. var zxc0,zxc2,zxccols;
  26. for (zxc0=0;zxc0<rows.length;zxc0++){
  27.  cols=rows[zxc0].getElementsByTagName('TD');
  28.  colsnu=cols.length-1
  29.  for (zxc1=0;zxc1<=colsnu;zxc1++){
  30.   if (!cols[zxc1].set){ cols[zxc1].set='X'; }
  31.   if(cols[zxc1].style.display=='none'&&ar){
  32.   cols[zxc1].style.display='';
  33.   cols[zxc1].set='show';
  34.   break;
  35.   }
  36.   if(cols[colsnu-zxc1].style.display==''&&!ar&&cols[colsnu-zxc1].set=='show'){
  37.   cols[colsnu-zxc1].style.display='none';
  38.   cols[colsnu-zxc1].set='hide';
  39.   break;
  40.   }
  41.  }
  43. }
  44. }
  45. //-->
  46. </script>
  47. </head>
  50. <body>
  51.                         
  52. <div class="inhalt"><a href="#self" onclick="toggle('box')" class="style3"><span class="subtitle">Availability</span></a>
  53. <div id="box"style="display:none"><p class="style2"><strong>This article is available</strong></p>
  54.     <table style="width: 100%">
  55.         <tr>
  56.             <td style="width: 386px"><em>Packaging</em></td>
  57.             <td><em>Price</em></td>
  58.         </tr>
  59.         <tr>
  60.             <td style="width: 386px">20 pieces</td>
  61.             <td>€1.73</td>
  62.         </tr>
  63.         </table><br/>
  64.     
  65.         
  66.     </div>
  67.         </div>
  69. <div class="inhalt"><a href="#self" onclick="toggle('box1')" class="style3"><span class="subtitle">Stock</span></a><div id="box1"style="display:none">
  70. <p ><span class="bold">The following colours are in stock</span></p>
  71. <table style="width: 100%">
  72.         <tr>
  73.             <td style="width: 386px"><em>Color</em></td>
  74.             <td><em>Location</em></td>
  75.         </tr>
  76.         <tr>
  77.             <td style="width: 386px">00</td>
  78.             <td>&nbsp;</td>
  79.         </tr>
  80.         </table>
  81.     <br/>
  82.     
  83.         </div>
  85.     </div>  
  86.     <div class="inhalt">
  87. <a href="#self" onclick="toggle('box3')" class="style3"><span class="subtitle">Composition</span></a>
  88. <div id="box3" style="display:none"><p ><span class="bold">Articles (Inclusive)</span></p>
  90.     <table id='id_of_table'style="width: 613px">
  91.         <tr>
  92.             <td style="width: 12px; height: 17px;"><em>N°</em></td>
  93.             <td style="display:none; height: 17px;" style="width: 102px"><em>Drawing</em></td>
  94.             <td style="width: 63px; height: 17px;"><em>Article</em></td>
  95.             <td style="width: 65px; height: 17px;"><em>Quantity</em></td>
  96.             <td style="width: 202px; height: 17px;"><em>Description</em></td>
  97.             <td style="width: 298px; height: 17px;"><em>Material</em></td>
  98.             <td style="width: 217px; height: 17px;"><em>Tolerance</em></td>
  99.         </tr>
  100.         <tr>
  101.             <td style="width: 12px; height: 15px;" valign="top"></td>
  102.             <td style="display:none; height: 15px;" style="width: 102px; height: 15px;" valign="top">
  103.             <img height="90" src="images/06577053_182429.png" width="47" /></td>
  104.             <td style="width: 63px; height: 15px;" class="copyblue" valign="top">
  105.             </td>
  106.             <td style="width: 65px; height: 15px;" valign="top"></td>
  107.             <td style="width: 202px; height: 15px;" valign="top"></td>
  108.             <td style="width: 298px; height: 15px" valign="top"></td>
  109.             <td style="width: 217px; height: 15px" valign="top"></td>
  110.         </tr>
  111.         </table>
  112.         <a href="#self" onClick= "AddRemoveCol('id_of_table', true);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a>
  113.         <a href="#self" onClick= "AddRemoveCol('id_of_table',false);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a><br/>
  114.             </div></div>
  116. </body>


I can show and hide textblocks by clicking on the title. I want to do more or less the same with a column in the 'composition' part of the site. I want to be able to click on an image under the table to show and hide the column 'drawing' (= the second column.) But I can't get this to work. The only solution I have so for is to use two images (one to show the column and one to hide it again). Is there a way to use just one image to get the same result? (currently the image on the right is to show the column en the left image is to hide the column)

Thanks,
Nina
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 21st, 2010, 2:49 am

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post June 21st, 2010, 7:42 pm

Maybe consider some jQuery for this, might make it easier.
Check out this plugin:
ColumnManager
Use your words like arrows to shoot toward your goal.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post June 21st, 2010, 8:05 pm

There is an Ozzu tutorial for this:

javascript-tutorials/tutorial-expand-collapse-blocks-and-navigation-trees-t89202.html
Custom Web Design

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 98 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.