Collapsible Table

[Pallavi Srivastava]

Hi,

I am making a search form in which after entering search criteria, results are displayed on that page only.I have made search criteria collapsible i.e the + sign will disappear the search criteria and -ve sign will make it appear.
The problem is that the search results are not able to jump up to fill the space of search criteria on collapsing the table.Is there anyway to move the results table up as soon as + sign is clicked.

Thanks.

[Eric Pascarello]

In the future it would help to show some code on how you are hiding the data.

Sounds like you are using visibility: hidden|visible when you should be using display: none:block.

Eric

[Pallavi Srivastava]

Hi,

Thanks for reply.Here is the code:

As soon as person clicks on -ve button it calls a javascript function:

function hideSearchBox()
{
var xname = new getObj('LayerName');

if(flag == 0)
{
document.frmsearch.btnhide.value ="+";
xname.style.visibility= 'hidden';
flag = 1;

}
else if(flag == 1)
{
document.frmsearch.btnhide.value= "-";
xname.style.visibility = 'visible';flag = 0;

}

}
What should I do so that the text displayed after this is automatically jump upward?

Thanks again.

[Eric Pascarello]

My answer that I posted before still applies, you need to use display.

Eric

[Pallavi Srivastava]

I have used xname.style.display='none and block alternatively but results are same as that of hidden and visible.Its not making the rest of the text to move up

[Eric Pascarello]

This works for me:

<p>TEST</p>
<table id="table1">
<tr>
<td>foo</td>
</tr>
</table>
<p>TEST</p>
<input id="btnPlus" type="button" onclick="showHide()" value="-"/>

function showHide(){
  var elem = document.getElementById("table1");
  elem.style.display = (elem.style.display == "none")?"block":"none";
  document.getElementById("btnPlus").value = (elem.style.display == "none")?"+":"-";
}

Eric