Here are some screenshots illustrating how it would work.
First, here’s the layout with two buttons and two associated containers, one above the other. The 1980 button controls the top (pink) container. The 1990 button controls the bottom (green) container.
Here’s how that looks in Preview, when I hover over the 1980 button:
And here’s how it looks when I hover over the 1990 button.
Notice that the green container appears to occupy the same space as the pink container, even though it is placed below the pink container in the layout.
In order for this to work:
Both containers must be collapsed when the page opens. (Be sure that the parent containers for the pink and green containers will shrink so they don’t hold space for a collapsed container.)
You need to have mouseIn and mouseOut code for each button. The mouseIn action will cause the associated container to expand, while mouseOut will cause it to collapse again.
This uses some very simple Velo code. I’m not a Velo expert, so you shouldn’t use my code, but here it is, as an illustration. This is code for one of the buttons.
export function button1980_mouseIn(event) {
$w("#box1980").expand();
console.log("Expand 1980");
}
export function button1980_mouseOut(event) {
$w("#box1980").collapse();
console.log("Collapse 1980");
}