Advice on Slider Transition Look and Feel

[CynthiaBlue]

I am writing a web app and I want to show/hide certain sections depending on what the user selects.

I am currently using a Toggle button with a q-slide-transition to show either a form to enter a person or a table that shows the people in the database. (I'm using Dexie / IndexedDB so it saves on the user's browser ).

I don't like how the slide transition collapses one option and then expands the next. It looks busy and has too much movement.

I was thinking of using an expansion item instead, but I don't see that I can format the form to enter the person with flexbox inside the expansion item.

This is the page. You don't have to log in right now to see the page. I will change that later though.

https://entrypaws.com/

I would love some input on what I could do to make it less clunky. I am in the middle of development so lots will change between now and when it's finished, right now I'm just looking for options on how to hide/show parts of the page.

Thanks!

[metalsadman]

you probably doing some other stuff there making it looks clunky. though using simple transition css based on height or vue transition tag, should be sufficient imo.

probably best to make a reproduction codepen, so we can play with it.

[CynthiaBlue]

thanks...I actually cleaned it up a little bit so the table now just shows all the time. However, I want to get the q-table to work instead of just using the markup table and I've been struggling with that.

[metalsadman]

can help you more, if you provide a minimal reproduction of your code preferably in a codepen.