Daisyui Tabs

[muadhaddabah]

How come the tabs don't switch or hide content on the inactive tabs?

[bbuchanan]

Came here to ask this very same thing. Maybe we have to do this manually in our code?

[adrianowy]

I'm thinking to combine part of library https://www.radix-ui.com with daisyui

[saadeghi]

Tabs are the visual representation. They can be links to other pages or do anything.
If you want them to show/hide a block of content, you need to do it using JS (based on the JS framework you're using).
There are many ways to do that but here's an example: https://svelte.dev/repl/28d9fef77b034460b6e072478c5f54f8?version=3.46.4

[gotjoshua]

I managed to get an almost purely css solution for tabs.
Only uses js for adding and removing the tab-active class.
Otherwise it is using checkbox and peer:checked strategy

code:
https://gitlab.com/onezoomin/ztax/cdn.zt.ax/-/blob/trunk/apps/color-schemes/components/tab-box.ts

live (requires a free fission account):
https://f.cdn.zt.ax/apps/color-schemes/

[Mashiane]

Just in case someone needs a quick outline of how these can work easily. One has then to use JS to switch between the active / non-active tabs. This might help so that one does not have to have to look for a solution.

Hope it helps someone.