Example of tab control with 2 tabs

I am looking for an example of a tab control that has 2 tabs and then items for each tab. I have this in a div that has the items in a scrolling window, so that they only take up a certain length of the screen. However when clicking different items they are not showing, the content hangs off the bottom and the over all experience is just not good. Does anyone have an example of how to have 2 tabs where the items for each tab may be different in length, and a nice way to do this on a home page? Would appreciate some help, I’m at wits end here. It does not have to be exactly like this, just curios the best way for users to see 2 tab controls on a home page that need to be placed together. Sorry, I was not authorized to show the content :frowning:

Can you provide either a link or a video?

It seems it’s worse when it’s in mobile of the browser is really small, the way it jumps up and down, I don’t know if thats normal or if there is a better way to prevent item from behind cut off. Overall just seems “klunky” to me.

https://lbm.bss.design/

If I undertand what you are saying…

When you select something below an open accordion, it will shift up, as the newly selected on opens and the other one closes. And the last one tends to get lost in the overflow.

height: fit-content

Will help items not to be cut off. But it will make the height more dynamically sized and not the 300px you set.

I don’t know the exact effect you are after here. But maybe, always open for the accordions is an option too??

Are you looking for the accordion to behave more like this (each question automatically scrolls to a specific position when clicked on)

1 Like

I really like the way this looks/works. I would like something like this with 2 separate tabs at the top like i have now.

That was going to be my other suggestion. :smile:

How about something like this:
https://scrolling-tabs.bss.design/

Not exactly what you had in mind, but an alternative

How about like this

1 Like

Dead link, doesn’t load for me.

really like this. Possible to share the bss file?

The file is available here:

https://cdn.sinfield.co/bss/tabswithmodal.bsdesign

I have put some comments in the js and html but if you need anything else feel free to DM me

thank you so much… will reach out if necessary.