Hide and show Layout

[scvinodkumar]

Hi there,

 

I have table with 720 width and contains three columns, 1st  column width -  355px,2nd  column width - 10px, 3rd column width - 355px and have given id for three column.

 

1st and 3rd column contain the iframe and i too set the same width to iframe as column width. And 2nd column for space.

 

I have a show/hide button above this table. When i click the button it needs to show the only one column, remaining columns needs to hide. Again i click it will need to show all three columns.

 

I try with the below code, but not working, please help me.

 

<script language="javascript">
function showhide()
{

if(document.getElementById('right_iframe').style.display == 'none')
{
document.getElementById('show_hide').src = 'arrows_right.gif';
document.getElementById('right_iframe').style.display = 'block';
document.getElementById('center_iframe').style.display = 'block';
document.getElementById('left_iframe').style.width = '355';
document.getElementById('search_iframe').style.width = '355';        
document.getElementById('center_iframe').style.width = '10';        
} 
else 
{
document.getElementById('show_hide').src = 'arrows_left.gif';
document.getElementById('center_iframe').style.display = 'none';
document.getElementById('right_iframe').style.display = 'none'        
document.getElementById('left_iframe').style.width = '710';
document.getElementById('search_iframe').style.width = '710';                
document.getElementById('center_iframe').style.width = '0';    
}
</script>

 

 

Please help me.

 

 

[xenophobia]

Try put your ID inside a div tag instead of the td.

 

Eg:

<table>
  <tr>
    <td><div id="left-col"></div></td>
    <td><div id="mid-col"></div></td>
    <td><div id="right-col"></div></td>
  </tr>
</table>

 

Then only you hide it using js:

document.getElementById("left-col").style.display = "none";