DelphiFAQ Home Search:

Dynamically collapse or expand a section of a web page

 

comments23 comments. Current rating: 5 stars (5 votes). Leave comments and/ or rate it.

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>

Content-type: text/html

Comments:

You are on page 2 of 2, other pages: 1 [2]
2012-12-24, 08:57:56
anonymous  
rating
Excellent!
2013-02-06, 10:31:58
anonymous from India  



Keywords:
2013-07-22, 17:19:30
anonymous from Panama  
rating
You are the best men THANKS
2014-12-16, 18:18:18
anonymous from Venezuela  
hey there and thank you for your info – I’ve definitely pieckd up something new from right here. I did however expertise a few technical issues using this web site, since I experienced to reload the site many times previous to I could get it to load correctly. I had been wondering if your web hosting is OK? Not that I'm complaining, but sluggish loading instances times will very frequently affect your placement in google and can damage your quality score if ads and marketing with Adwords. Anyway I am adding this RSS to my e-mail and could look out for much more of your respective exciting content. Make sure you update this again soon..
2014-12-31, 22:01:47
anonymous from Venezuela  
I in addition to my bdidues ended up reading the good tips located on your web blog then all of a sudden came up with a horrible suspicion I never thanked the web blog owner for them. The ladies were definitely for this reason happy to read them and now have absolutely been tapping into these things. Many thanks for truly being considerably thoughtful and also for choosing this form of brilliant issues most people are really wanting to learn about. Our own honest regret for not expressing gratitude to you sooner. http://svnmao.com [url= http://afqezz.com]a..qezz[/url] [link= http://kcejwowxd.co..wxd[/link]
2014-12-31, 22:02:10
anonymous from Brazil  
I in addition to my bdidues ended up reading the good tips located on your web blog then all of a sudden came up with a horrible suspicion I never thanked the web blog owner for them. The ladies were definitely for this reason happy to read them and now have absolutely been tapping into these things. Many thanks for truly being considerably thoughtful and also for choosing this form of brilliant issues most people are really wanting to learn about. Our own honest regret for not expressing gratitude to you sooner. http://svnmao.com [url= http://afqezz.com]a..qezz[/url] [link= http://kcejwowxd.co..wxd[/link]
2015-02-01, 01:11:00
anonymous  
If you wrote an article about life we'd all reach eneenhtinmlgt.
2017-11-27, 19:49:58
anonymous from Indonesia  
Kami sekelurga mengucapkan banyak trimah kasih kpada AKI NUGROHO atas bantuanya no 4d (3569) benar2 tembus 100% bila mau bukti hubungi AKI NUGROHO di nmr ini ;0821=9802=3183; Trma ksh...
You are on page 2 of 2, other pages: 1 [2]

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: