J
Jason Williamson
Hello all - I have this working code and as you can see initially it
will display "Apple" & "Pear", if you click the associated button it
switches Apple to Orange and Pear to Pineapple. I don't want to lose
the other element when a button is clicked. How would I tweak to fix?
Separately, is there any way to modify this so I can dynamically scale
all of this out to an infinite number of <div> ID's without hard-coded
id numbers getting in the way?
Cheers, Jason
<style type="text/css">
table.inline{display:inline-table}
..inline{display:inline}
</style>
<script type="text/javascript">
function toggleLayout(which) {
which = /\d$/.exec(which)[0];
for (i=5; --i; ) {
var div = document.getElementById("layout"+i);
div.style.display = i==which ? "block" : "none";
}
}
</script>
<div id="container" style="position: relative;">
<div style="position: relative; top: 0; left: 0;" class="inline"
id="layout1"><table border="1" class="inline"><tr><td>Content Apple
<a href="javascript:toggleLayout(2)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0;" class="inline"
id="layout3"><table border="1" class="inline"><tr><td>Content Pear <a
href="javascript:toggleLayout(4)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0; display: block;
display: none;" id="layout2"><table border="1"><tr><td>Content Orange
<a href="javascript:toggleLayout(1)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0; display: block;
display: none;" id="layout4"><table border="1"><tr><td>Content
Pineapple <a href="javascript:toggleLayout(3)">Switch</a></td></tr></table></div>
</div>
will display "Apple" & "Pear", if you click the associated button it
switches Apple to Orange and Pear to Pineapple. I don't want to lose
the other element when a button is clicked. How would I tweak to fix?
Separately, is there any way to modify this so I can dynamically scale
all of this out to an infinite number of <div> ID's without hard-coded
id numbers getting in the way?
Cheers, Jason
<style type="text/css">
table.inline{display:inline-table}
..inline{display:inline}
</style>
<script type="text/javascript">
function toggleLayout(which) {
which = /\d$/.exec(which)[0];
for (i=5; --i; ) {
var div = document.getElementById("layout"+i);
div.style.display = i==which ? "block" : "none";
}
}
</script>
<div id="container" style="position: relative;">
<div style="position: relative; top: 0; left: 0;" class="inline"
id="layout1"><table border="1" class="inline"><tr><td>Content Apple
<a href="javascript:toggleLayout(2)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0;" class="inline"
id="layout3"><table border="1" class="inline"><tr><td>Content Pear <a
href="javascript:toggleLayout(4)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0; display: block;
display: none;" id="layout2"><table border="1"><tr><td>Content Orange
<a href="javascript:toggleLayout(1)">Switch</a></td></tr></table></div>
<div style="position: relative; top: 0; left: 0; display: block;
display: none;" id="layout4"><table border="1"><tr><td>Content
Pineapple <a href="javascript:toggleLayout(3)">Switch</a></td></tr></table></div>
</div>