Dynamically collapse or expand a section of a web page

Programming
C#
C++ (7)
Delphi (604)
Java (8)
JavaScript (55)
Document (8)
Events (8)
Strings (3)
perl (40)
php (12)
VBScript (1)
Visual Basic (1)

Exchange Links

About this site

Links to us

Dynamically collapse or expand a section of a web page

5 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>

Comments:

2006-09-13, 15:25:56

anonymous from United States

Wonderful!

Ward Christensen inventor of Xmodem & w/Randy Suess, BBSs

2006-10-12, 21:11:17

JazzLad from United States

Rock on!
Suggestion for the novice: use notepad's replace all to replace 'tbl' with [whatever else] if you use it more than once, ie multiple colapsing elements.

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%>


	Search: