JavaScript Help: How to Collapsing HTML containers

This example shows how to use JavaScript to permit DIV's to function as collapsable containers. This project started from some Perl generated HTML which wasn't well-formed enough to permit JavaScript to access required components through the browser DOM. I include the original notes below to convey that at least reasonable HTML (namely avoid incorrect nesting) is needed for these techniques to correctly latch onto containers. To use the example, simply click in the region of a given DIV below.

Stuff that needs to change in the generated source.... 1. surround the whole block of generated history data with a single <div class="mToggle" onclick="if(window.toggleDiv)toggleDiv()"> and </div> (You only need the one surrounding "master container" to get all of the internal pieces to function) 2. the hotzones MUST be correctly nested DIVs (the crawl-back looks for DIV objects specifically, we could tweak if this isn't feasable) Problem here: The HTML you sent me isn't well-formed (there are <div></div> between internal <table> elements... these don't appear to bind correctly to the DOM as the browser renders the source code which results in clicks on those div's bubbling up to the nearest well-formed parent DIV.) 3. -if- you want to pre-class the divs as "mToggleClosed" the initial state of the DIV's will be collapsed, otherwise they won't collapse until clicked initially View the source here and grab everything between the relevant start/stop comments to implement.

Additional Keywords: collapsable div, collapsing html containers

Step: choose_domain
hookcouldreturn
choose_domain_hook_preN
info_existsY1
validateY1
Step: enter_info
hookcouldreturn
enter_info_hook_preN
info_existsY1
validateY0
enter_info_hash_fillY
add_to_fillN
enter_info_hash_formY2
enter_info_hash_errorsN
enter_info_stepN
printYprinting signup/enter_info
Sample: This is pre-defined as mToggleClosed, also internal DIV's are well-formed and collapse indepentantly of the parent
enter_info_hook_preN
printY
printing signup/enter_info
printing signup/enter_info
printing signup/enter_info
printing signup/enter_info



[310]

More Resources:
web resources and learning
web design
web hosting