Help : show/hide table

k4nth · #1 (**permalink**) 12-27-04, 11:05 PM

Hey guys, i want to know how to do show/hide table like in vbulletin with cookie support. so it remembers when you come back or refresh page. i know it can be done using javascript but i haven't got a clue. this is what i have done so far.

<script language="JavaScript" type="text/JavaScript">

function showit(box)
{
document.getElementById(box).style.display="block" ;
}

function closeit(box)
{
document.getElementById(box).style.display="none";
}

</script>

<div id="div1">
some stuff here
</div>

<a href="#top" onclick="closeit('div1');">Hide</a>
<a href="#top" onclick="showit('div1');">Show</a>

instead of the text (Hide/Show) i want to place an image which changes from plus to minus when you click. hope someone can help me out. thanking you in advance.

4thorder · #2 (**permalink**) 12-28-04, 06:07 PM

I understand the basic requirement but this is totally dependent on layout. This is due to the fact that the show hide icon needs to be always present. Therefore, this will effect layout.

Likewise, Hiding or showing elements can be tricky if you dont have the exact layout down. This is due to "inline" style. It "removes" the content from display consideration which means that the HTML for the page changes temperarily until you stick it back in there. This is not the case with hiding "block" but then you have big gapping spaces where the HTML is but just not visible.

You mention that you want it to be like the vbulletin show/hide. What does this mean? Where is this feature?

For example are you going to have rows that are hidden or shown wihtin a given table?

Give me an example of the layout (HTML) that you require AND where the content will reside within that layout and we will see what can be done.

k4nth · #3 (**permalink**) 12-28-04, 08:43 PM

if you look below this post, there is a section called 'Similar Threads'. i want to do the same thing. hide the content by clicking on the + and - buttons.

4thorder · #4 (**permalink**) 12-29-04, 12:13 AM

Well I have an answer for you but I havent taken the time to make it crossbrowser compatible - so IE only - youll have to retrofit the netscape stuff in yourself.

This will work for as many tables that you have on the page AS LONG AS you follow the basic TABLE HTML structure that I have:

<TABLE>
<TR>
<TH width="95%"></TH>
<TH width="5%"></TH>
</TR>
<TR><TD>CONTENT</TD></TR>
</TABLE>

Script also allows for tables inside of tables as long as you place the internal table where the content should go for the outer table.

Finally, you can set the page to auto expand all or auto collapse all when the page initally loads.

here is an example: http://www.4thorder.us/Scripts/ONDEC...seTableRow.htm

Code:

<HTML>
<HEAD>
<SCRIPT>
// :::::::::::::::::::::::::
// :::: Global Variables :::
// :::::::::::::::::::::::::
var firstLoad=0
var GlobalECState=0 // 0=collapsed, 1=expanded; used for inital state of ALL branches
// :::::::::::::::::::::::::
// :::: Global Functions :::
// :::::::::::::::::::::::::
function InitializePage()
{Icons(); attachEventhandlers();}
// Attach event handlers to all images within container
function attachEventhandlers()
{
IMGCollection=document.getElementsByTagName("IMG");
if (IMGCollection!=null)
{ for (l=0; l<IMGCollection.length; l++)
{IMGCollection[l].onmouseup=onMouseUpHandler;}
}
}
function Icons()
{
// Collect all tables
TABLECollection=document.getElementsByTagName("TABLE");
// Loop through and insert icon in all TH elements
if (TABLECollection!=null)
{for (i=0; i<TABLECollection.length; i++)
{ 
// Grab second TH element and second TR element 
THCollection=TABLECollection[i].getElementsByTagName("TH");
THElement=THCollection[1];
TRCollection=TABLECollection[i].getElementsByTagName("TR");
TRElement=TRCollection[1]; 
 
if(firstLoad==0)
 {// Yes: FIRST LOAD OF PAGE -- insert image
  if(GlobalECState==0)
  {// Global ECState is COLLAPSED (+) (0) 
  THElement.innerHTML="<IMG border='0' src='+.gif' width='13' height='13'>" 
 
  IMGCollection=TABLECollection[i].getElementsByTagName("IMG");
  IMGCollection[0].setAttribute("ECState",0);
 
  TRElement.style.display='none';
  }
  else
  {// Global ECState is EXPANDED (-) (1)
  THElement.innerHTML="<IMG border='0' src='-.gif' width='13' height='13'>"
 
  IMGCollection=TABLECollection[i].getElementsByTagName("IMG");
  IMGCollection[0].setAttribute("ECState",1);
 
  TRElement.style.display='inline'; 
  }
 }
else
 {// No: FIRST LOAD OF PAGE - change image
  // Grab ECState of image and expand or collapse branch
 IMGCollection=TABLECollection[i].getElementsByTagName("IMG");
 State=IMGCollection[0].getAttribute("ECState");
 if(State==0)
  {// ECState is COLLAPSED (+) (0)
  // Change Image
  IMGCollection[0].setAttribute("src","+.gif");
  // Hide DIV
  TRElement.style.display='none';
  }
 else
  {// ECState is EXPANDED (-) (1)
  // Change Image
  IMGCollection[0].setAttribute("src","-.gif");
  // Show DIV
  TRElement.style.display='inline';
  }
 }
}
}
if(firstLoad==0){firstLoad=1;}
}
// ::::::::::::::::::::::::
// :::: Event Handlers ::::
// ::::::::::::::::::::::::
function onMouseUpHandler()
{
if(window.event.button==1)
{
// Grab Target Element
  imgObj=window.event.srcElement;
 
// Toggle ECState
State=imgObj.getAttribute("ECState");
if(State==0)
{imgObj.setAttribute("ECState",1);}
else{imgObj.setAttribute("ECState",0);}
}
Icons();
}
</SCRIPT> 
</HEAD>
<BODY onload="InitializePage()">
<TABLE border="1" cellpadding="2" style="border-collapse: collapse" width="100%">
 <TR>
  <TH width="95%">EXAMPLE OF ONE TABLE INSIDE OTHER</TH>
  <TH width="5%"></TH>
 </TR>
 <TR>
  <TD colspan="2">
   <TABLE border="1" cellpadding="2" style="border-collapse: collapse" width="100%">
 <TR>
  <TH width="95%">EXAMPLE OF SIMPLE LAYOUT</TH>
  <TH width="5%"></TH>
 </TR>
 <TR>
  <TD colspan="2">EXAMPLE OF SIMPLE LAYOUT</TD>
 </TR>
   </TABLE>
  </TD>
 </TR>
</TABLE>
<BR>
<TABLE border="1" cellpadding="2" style="border-collapse: collapse" width="100%">
 <TR>
  <TH width="95%"></TH>
  <TH width="5%"></TH>
 </TR>
 <TR>
  <TD colspan="2">CONTENT HERE</TD>
 </TR>
</TABLE>
 
</BODY>
</HTML>

here are links to the + - image go ahead and download them - I made these as well

http://www.4thorder.us/Scripts/ONDEC...tableRow/-.gif
http://www.4thorder.us/Scripts/ONDEC...tableRow/+.gif

Happy coding
http://www.4thorder.us/Scripts

4thorder · #5 (**permalink**) 01-10-05, 10:30 AM

Sorry I moved this demo to here:

http://www.4thorder.us/Scripts/Scrip...as/default.cfm