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

Links to us

Dynamically collapse or expand a section of a web page

9 comments. Current rating: 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

2010-01-14, 14:31:54

anonymous from United States

and what if i want to implement this for multiple section in the same page?

2010-02-11, 13:58:28

anonymous from United States

This is greate. Instead ofd Hide and Expand can I have a single button > this button when expaned shows that data, but by clicking on the same button it collapses the data

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


	Search: