Quick Search for:  in language:    
DHTML,IE4,method,expanding,contracting,divs,S
   Code/Articles ╗ |  Newest/Best ╗ |  Community ╗ |  Jobs ╗ |  Other ╗ |  Goto ╗ | 
CategoriesSearch Newest CodeCoding ContestCode of the DayAsk A ProJobsUpload
Java/ Javascript Stats

 Code: 228,322. lines
 Jobs: 100. postings

 How to support the site

 
Sponsored by:

 
You are in:
 
Login





Latest Code Ticker for Java/ Javascript
Vending Machine Example, GUI Version.
By JJG on 1/16


Vending Machine Console Example
By JJG on 1/16


Linear Fit From X/Y Coordinates
By JJG on 1/16


Click here to see a screenshot of this code!PV iTime 1.0 J2ME
By Pavol Valentin on 1/16

(Screen Shot)

Falcon Fighter V_2_0
By Tarokahn on 1/15


Fibonacci Sequnce
By Danny Baruh Kaplun on 1/15


Prime Calculator
By Danny Baruh Kaplun on 1/15


Click here to see a screenshot of this code!EasyFTP 1.0
By Marcelo Valle Franco on 1/15

(Screen Shot)

Click here to see a screenshot of this code!A basic Client Server Application III
By Ronald Holland on 1/13

(Screen Shot)

Click here to put this ticker on your site!


Add this ticker to your desktop!


Daily Code Email
To join the 'Code of the Day' Mailing List click here!

Affiliate Sites



 
 
   

Toggle child rows in HTML table [Expanding divs]

Print
Email
 
VB icon
Submitted on: 5/22/2003 3:12:16 AM
By: Simon Goodwin  
Level: Intermediate
User Rating: By 1 Users
Compatibility:JavaScript

Users have accessed this code 1887 times.
 

(About the author)
 
     DHTML method of expanding / contracting divs. Seen all the time in DHTML menus but in this case used to expand a child row of further details for a customer details grid. Very easy to use within a dynamic page, just create a unique div ID with an incrementing variable for each row and the clientside function handles the rest . IE4 +
 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
 
Terms of Agreement:   
By using this code, you agree to the following terms...   
1) You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.   
2) You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
3) You may link to this code from another website, but ONLY if it is not wrapped in a frame. 
4) You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.

//**************************************
//     
// Name: Toggle child rows in HTML table
//     [Expanding divs]
// Description:DHTML method of expanding
//     / contracting divs. Seen all the time in
//     DHTML menus but in this case used to exp
//     and
a child row of further details for a customer details grid. Very easy to use within a dynamic page, just create a unique div ID
with an incrementing variable for each row and the clientside function handles the rest . IE4 +
// By: Simon Goodwin
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=3600&lngWId;=2//for details.//**************************************
//     

// <!-- function used to expand / clo
//     se the content within a div -->

    function toggle(element,tog) {
        if (element.style.display == 'none') {
        element.style.display = 'block';
        tog.innerHTML = '-';
        } else {

element.style.display = 'none'; tog.innerHTML = '+'; }
}
//<!-- HTML required for example --&g; // t; <TABLE border="1"> <!-- parent row --> <TR> <!-- toggle cell --> <TD align="center" width=10> <span id="t1" onclick="toggle(m1,this);"> <B>+</B> </span> </TD> <!-- end toggle cell --> <!-- summary data --> <TD>Customer name</TD> <TD>Reseller name</TD> <TD>Country</TD> <!-- End sumary data --> </TR> <!-- End Parent row --> <!-- Expanding [child] cell --> <TR> <TD colspan="2"></TD> <TD colspan="2"> <!-- div content // id called in toggle call in row above [unique] --> <DIV id="m1" style="display: none;"> <!-- details table --> <TABLE cellpadding="0" ID="Table1"> <TR> <TD>10 Main Street</TD> </TR> <TR> <TD>Reading</TD> </TR> <TR> <TD>Hants</TD> </TR> </TABLE> <!--end details table --> </DIV> <!-- End Div content --> </TD> </TR> <!-- End Expanding cell --> </TABLE>


Other 10 submission(s) by this author

 

 
Report Bad Submission
Use this form to notify us if this entry should be deleted (i.e contains no code, is a virus, etc.).
Reason:
 
Your Vote!

What do you think of this code(in the Intermediate category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor See Voting Log
 
Other User Comments
10/28/2003 4:26:18 PM:Mike Dattilo
Great code.  This did exactly what I 
was looking for.  Very easy to adapt to 
what you want to do!
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
Add Your Feedback!
Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this code has been kind enough to share it with you.  If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular code, please click here.
 
Name:
Comment:

 

Categories | Articles and Tutorials | Advanced Search | Recommended Reading | Upload | Newest Code | Code of the Month | Code of the Day | All Time Hall of Fame | Coding Contest | Search for a job | Post a Job | Ask a Pro Discussion Forum | Live Chat | Feedback | Customize | Java/ Javascript Home | Site Home | Other Sites | About the Site | Feedback | Link to the Site | Awards | Advertising | Privacy

Copyrightę 1997 by Exhedra Solutions, Inc. All Rights Reserved.  By using this site you agree to its Terms and Conditions.  Planet Source Code (tm) and the phrase "Dream It. Code It" (tm) are trademarks of Exhedra Solutions, Inc.