DelphiFAQ Home Search:
General :: Web publishing :: JavaScript
Code snippets to add functionality to your HTML pages, preferably cross-browser.

Articles:

This list is sorted by recent document popularity (not total page views).
New documents will first appear at the bottom.

Featured Article

Dynamically collapse or expand a section of a web page

Question:

I want to dynamically collapse or expand a section of a web page. The idea is to show the user a short screen with a few options, and if the user wants to see any detail, then he will click on an "Expand" link and the relevant section will show its details.
This should be done in Javascript, with no extra http page views.

Answer:

The trick is to put the to-be-collapsed sections in DIV tags.

The code below has a DIV section named 'tbl' which is initially hidden. Then by clicking on a link it can be expanded or hidden again.

Make sure to set the initial style to display:none
<div id=tbl name=tbl style="overflow:hidden;display:none">

<body>
 
 Some text before
 
 <div id=tbl name=tbl style="overflow:hidden;display:none">
 <table border=1>
 <tr><td>test</td></tr>
 <tr><td>test</td></tr>
 <tr><td>test</td></tr>
 </table>
 </div>
 
 some text after
 
 <script language="JavaScript" type="text/javascript">
 <!--
 function sizeTbl(h) {
   var tbl = document.getElementById('tbl');
   tbl.style.display = h;
 }
 // -->
</script> 
 <br>
 <a href="javascript:sizeTbl('none')">Hide</a>
  
 <a href="javascript:sizeTbl('block')">Expand</a>
 
 </body>
 

Generated 20:01:56 on Jul 20, 2018