Dynamically collapse or expand a section of a web page

Programming
C#
C++ (7)
Delphi (617)
Java (8)
JavaScript (31)
Document (8)
Events (8)
ExtJS (9)
Strings (3)
perl (9)
php (4)
VBScript (1)
Visual Basic (1)

Exchange Links

About this site

New related comments
Number of comments in the last 48 hours

Reload a web page with a javascript function
1 new comments

Dynamically collapse or expand a section of a web page

7 comments. Current rating: 5 stars

5 stars

(3 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>

Send a message to
Subject

Comments:

2006-10-23, 18:11:11

Yeeehaw. from United Kingdom

Indeed this is thee code of the night!... and it makes an awesome little 'dispander' for the likes of images and alsorts if you remove 'display:none;' simple really!, nice one!

2007-05-14, 06:47:16

anonymous from Israel

you are the best
the is just fit to me
amazing
thanks

2007-05-14, 07:41:10

anonymous from Israel

i'v just enter a nice loop to fix the jc in loop mode :

<%@ Language=VBScript %>
<%set c = Server.CreateObject('adodb.connection')
set r=Server.CreateObject('adodb.recordset')
c.Open 'Provider=Microsoft.Jet.OLEDB.4.0; Data Source =' & Server.MapPath('/access_db/sites.mdb') . activeconnection=c%>
<html>
<head>

<st;script language='JavaScript' type='text/javascript'>

</script>

</head>
<body>
<%r.open = 'SELECT * From review '%>
<%do until r.eof%>
<table><tr>
<table border=0 width='100%' style='border-collapse: collapse'>
<th bgcolor='#C0C0C0'><%=r.fields('site_category')%></th>
<th bgcolor='#C0C0C0'><%=r.fields('site_category')%></th>
<th bgcolor='#C0C0C0'><. fields('site_category')%></th>
</table>

&
<div id=<%=r.fields('site_id')%> name=<%=r.fields('site_id')%> style='overflow:hidden;display:none'>
<table border=0 width='100%' style='border-collapse: collapse'>
<tr >
<td bgcolor='#800000'><%=r.fields('site_category')%></td>
<td bgcolor='#800000'>test</td>
<bgcolor= '#800000'>test</td>
</tr>
</tableble>
</div>

<br>
<a href='javascript:sizeTbl('none',<%=r.fields('site_id')%>)'>hide</a>
<a href='javascript:sizeTbl('block',<. fields('site_id')%>)'>show</a>
</tr></t;/table>
<%r.movenext
loop%>
</body>
</html>
<%r.close
set r=nothing
c.close
set c=nothing%>

2009-10-22, 11:51:49

anonymous from Singapore

The code really helped me.
Thanks a lot

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:
Add a picture: 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.