DelphiFAQ Home Search:

Dynamically collapse or expand a section of a web page

 

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

Comments:

You are on page 1 of 2, other pages: [1] 2
2006-10-23, 18:11:11
Yeeehaw. from United Kingdom  
rating
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
2011-12-29, 09:12:33
anonymous from United States  
rating
Great use. Thanks I appreciate the post.
2012-05-05, 16:53:17
[hidden] from United States  
rating
This works but what if I want to have different sections on the same page that use this?

I wouldn't mind if only 1 can only be expanded at a time, but when I create 5 different sections and use this code, it only expands/collapses the first one.

I guess I'm asking how I would let the script know which section I want expanded/collapsed -- some unique identifier for each div section??

2012-05-10, 14:14:12
anonymous  
The javascript find the section to show/hide based on the div id. in the example the id is 'tbl' as seen in this line of the javascript.

document.getElementById('tbl');

It might be worth finding the command to get the current display and expand/ollapse using the same button/link.
2012-05-10, 16:16:54   (updated: 2012-05-10, 16:21:32)
[hidden] from United States  
Thank you. But I don't know what getting the command means. I tried the following with multiple div sections, and it still is only expanding/collapsing one section (the same one) instead of different ones. What else could I do? Help! I can only submit part of the code, but here's what I'm doing:
div id='2' name='2' document.getElementById('2');
2012-06-05, 21:36:23
anonymous from China  
<strong> http://www.coachout..strong> <a href=' http://www.coachout..g>Coach Outlet Online</strong></a><br />
<strong> http://www.coachfac..strong> <a href=' http://www.coachfac..g>Coach Factory</strong></a><br />
<strong> http://www.myloveco..strong> <a href=' http://www.myloveco..g>Coach Outlet Online</strong></a><br />
<strong> http://www.buyincoa..strong> <a href=' http://www.buyincoa..g>Coach Outlet</strong></a><br />
<strong> http://www.cheapcoa..strong> <a href=' http://www.cheapcoa..g>Cheap Coach Handbags</strong></a><br />
<strong> http://www.coachfac..strong> <a href=' http://www.coachfac..g>Coach Factory Outlet</strong></a><br />
<strong> http://www.buycoach..strong> <a href=' http://www.buycoach..g>Coach Outlet Online</strong></a><br />
<strong>www.coachoutletonfactory.net</strong> <a href=' http://www.coachout..g>Coach Factory Outlet</strong></a><br />
<strong>www.coachoutletonline4you.us</strong> <a href=' http://www.coachout..g>Coach Outlet Online</strong></a><br />
<strong>coachfactoryoutletq.net</strong> <a href=' http://www.coachfac..g>Coach Factory</strong></a><br />
<strong>gotocoachoutlets.net</strong> <a href=' http://www.gotocoac..g>Coach Outlet Online</strong></a><br />
2012-06-07, 04:15:41   (updated: 2012-06-07, 04:18:30)
anonymous from India  
!
2012-08-10, 04:39:46
anonymous from Madras, India  
hiiiiiiiiiiiiiii
2012-11-12, 02:55:44
anonymous from United Kingdom  
2012-11-12, 05:31:18
anonymous from United States  
You are on page 1 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: