Script to keep tabs from overlapping


#1

Hey! I have pretty good understanding of hype, but can definitely say my programming is lacking. While I could maybe finagle a solution without, I was wondering how I could go about creating a script that would keep clickable tabs from over lapping, like if I were to click on lower down it would raise the ones above too and vice versa would bring all below down as well.

This is how tabs should sit, if a lower one is pressed, all others are still visible.

This is what I want to avoid.


#2

The key thing you want to do is setup three timelines that play with ‘relative’ keyframes. Each timeline should represent the ‘show’ of one of the four boxes you want to show.

relative.hype.zip (18.3 KB)

Also this format is sometimes called accordion, and you can get this running with the ‘Accordion’ UI element in Bootstrap:


#3

Huh, I really should look further into hype elements, I had no idea relative keyframes were a thing. Guess I still have a lot to learn. Thanks Daniel! This solves my issue!


#4

@hoolia

More examples and other approaches for “accordion” formatting:


#5

I appreciate the extra info, thanks! You both have been very helpful.