[Javascript] Multi-Layer Positioning

[Matt Barton]

Hi,

This is actually quite simple, but took me ages to learn the correct
technique.  Imagine that this is your html specifying the two buttons and
two sets of details:

<!-- START -->
<table>
    <tr>
        <td>
            <img src="button1" onClick="fToggle(1)">
        </td>
    </tr>
    <tr>
        <td id="details_1" style="display: none">
            Details 1... Pom, pom, pom, tiddly
        </td>
    </tr>
    <tr>
        <td>
            <img src="button2" onClick="fToggle(2)">
        </td>
    </tr>
    <tr>
        <td id="details_2" style="display: none">
            Details 2... Tiddly pom, tiddly pom, tiddly pom, pom, pom
        </td>
    </tr>
</table>
<!-- END -->

Specifying the two table cells details_1 and details_2 with the css
attribute "display: none" will mean that they are not shown, and don't take
up any space on the screen.

So, all you now need is a javascript function to handle the display of the
details cells:

// ------
function fToggle (iDetailsNumber) {
    oDetailsCell = document.getElementById ("details_" + iDetailsNumber);

    if (oDetailsCell.style.display == "none") {
        oDetailsCell.style.display = "";
    } else {
        oDetailsCell.style.display = "none";
    }
}
// ------


And that should do it.  I've tested that in IE6/Win, but I'm not aware that
it should pose any cross-browser issues.  I'm not in a position to test on
any other platforms, so if it doesn't work on your platform then it might
need tickling up.

HTH

Matt

> Initial Layout
>
> ButtonImage1 faq1
> ButtonImage2 faq2
>
> When ButtonImage1 is clicked the display should be:
>
> ButtonImage1 faq1
> details1
> ButtonImage2 faq2
>
> When ButtonImage2 is clicked
>
> ButtonImage1 faq1
> details1
> ButtonImage2 faq2
> details2
>
> Now When ButtonImage1 is clicked again
>
> ButtonImage1 faq1
> ButtonImage2 faq2
> details2
>