mike600
05-24-2006, 02:00 AM
My intent is to be able to expand/collapse multiple tables individually, and all at once. My current implementation allows for the "individual", but not the "all at once" functionality, because the current code I'm using just toggles.
code:
<html>
<head>
<script>
function expandCollapse() {
for (var i=0; i<expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
</script>
</head>
<body>
<p><em>Example:</em></p>
<div id="1a" >
<a href="javascript: expandCollapse('1a', 'bb');">Expand Layer</a>
</div>
<div id="bb" style="display: none;">
<a href="javascript: expandCollapse('1a', 'bb');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<div id="2a" >
<a href="javascript: expandCollapse('2a', '2b');">Expand Layer</a>
</div>
<div id="2b" style="display: none;">
<a href="javascript: expandCollapse('2a', '2b');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<div id="3a" >
<a href="javascript: expandCollapse('3a', '3b');">Expand Layer</a>
</div>
<div id="3b" style="display: none;">
<a href="javascript: expandCollapse('3a', '3b');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<a href="javascript: expandCollapse('1a', 'bb','2a', '2b','3a', '3b');">Collapse Layer</a>
</body>
</html>
Is there any way to tweak this, or should I use a different function for the script... what might that be. I've got one that I think would work, but don't know how to use it. Thanks!
(Here's the other function)
code:
<script>
function expand(event){
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
if(regEx2.test(tables[i].id)) {
tables[i].style.display = 'table';
}
else if(regEx3.test(tables[i].id)) {
tables[i].style.display = 'none';
}
}
}
function collapse(event) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
if(regEx3.test(tables[i].id)) {
tables[i].style.display = 'table';
}
else if(regEx2.test(tables[i].id)) {
tables[i].style.display = 'none';
}
}
}
</script>
code:
<html>
<head>
<script>
function expandCollapse() {
for (var i=0; i<expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
</script>
</head>
<body>
<p><em>Example:</em></p>
<div id="1a" >
<a href="javascript: expandCollapse('1a', 'bb');">Expand Layer</a>
</div>
<div id="bb" style="display: none;">
<a href="javascript: expandCollapse('1a', 'bb');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<div id="2a" >
<a href="javascript: expandCollapse('2a', '2b');">Expand Layer</a>
</div>
<div id="2b" style="display: none;">
<a href="javascript: expandCollapse('2a', '2b');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<div id="3a" >
<a href="javascript: expandCollapse('3a', '3b');">Expand Layer</a>
</div>
<div id="3b" style="display: none;">
<a href="javascript: expandCollapse('3a', '3b');">Collapse Layer</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>
<a href="javascript: expandCollapse('1a', 'bb','2a', '2b','3a', '3b');">Collapse Layer</a>
</body>
</html>
Is there any way to tweak this, or should I use a different function for the script... what might that be. I've got one that I think would work, but don't know how to use it. Thanks!
(Here's the other function)
code:
<script>
function expand(event){
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
if(regEx2.test(tables[i].id)) {
tables[i].style.display = 'table';
}
else if(regEx3.test(tables[i].id)) {
tables[i].style.display = 'none';
}
}
}
function collapse(event) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
if(regEx3.test(tables[i].id)) {
tables[i].style.display = 'table';
}
else if(regEx2.test(tables[i].id)) {
tables[i].style.display = 'none';
}
}
}
</script>