Hi I am trying to create a timeline and when I hover over my buttons I want to display details pertaining to that year in the box below. Is there any way to do so? I include 2 screen shots to show the basic screen and the button changing once I hover over a year. The issue is I cannot have overlapping containers to display the details for each year so is there any suggestion as to how I can get around this issue? Thanks
@mlazzzarus Would it work to use collapsed containers and then use mouseIn and mouseOut actions to expand / re-collapse the appropriate container for each year? That way you can have multiple containers extending down the page without overlapping, but they’ll all appear to occupy the same space when they expand.
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");
}
Thanks again Jim, after your initial comment I went back to editorX to see if one could collapse a container as was possible in Wix but I found nothing (I am very new to editor so maybe I have missed something there). I am not familiar with any coding so will have to look in a bit more detail at the Velo. Either way thank you for steering me in a direction, I shall investigate further and learn something new 
In Editor X, you must first activate Developer Mode. Then, if you select an object, you’ll have the option of collapsing it.
Here’s a screenshot where I’m setting the pink container to collapse.
That sets the initial state. You’ll then use your buttons and code to control expanding and collapsing as the user moves the cursor.
Thats so helpful Jim, thanks a lot. I am looking at it now!
You might find this video helpful, too. The Editor X interface is a bit different from what’s shown, but the principles are the same: How to Add Custom Interactions with JavaScript | Velo by Wix - YouTube
Very neat! Thanks