Tabbed Content - Mobile view open and close

[lesliekirk]

Is it possible to have the Tabbed Content also close when the cmp-flex-tabs__content label is clicked upon? I'd like to be able to include a + (plus) to indicate "open" and a - (minus) to indicate close.

[Matt Zimmermann]

Hi Leslie,

Try changing the input type from radio to checkbox.

[lesliekirk]

Hi Leslie,

Try changing the input type from radio to checkbox.

Thanks Matt - that was fun. When it's a checkbox, it does open and close when clicked. But it gets very wonky in desktop view. Two tabs can remain open or both tabs can be closed. I'll play around with it a some to see if I can use the checkbox only for smaller screens. Or is there a better way to control the click?

[lesliekirk]

Thanks Matt - that was fun. When it's a checkbox, it does open and close when clicked. But it gets very wonky in desktop view. Two tabs can remain open or both tabs can be closed. I'll play around with it some to see if I can use the checkbox only for smaller screens. Or is there a better way to control the click?

Would you believe this has come up again? The checkbox works for opening and closing but as I previously mentioned, you can click each tab open and the others don't close until you go back and click it shut. So you could have a bunch of tabs all open at the same time (sort of defeats what is being done). Since this now for a Colossus layout I probably should start a new question but I'm hoping maybe it's a "universal" fix).

Any other suggestions?

[Matt Zimmermann]

HI Leslie,

Colossus uses similar functionality, but not the same. If you are using a checkbox it would be possible to multiple selections, which is why a radio is typically used. If you want to allow for multiple selections on mobile, but not on desktop, then you will have to come up with some JavaScript to control the opening and closing based on screen size.

[lesliekirk]

HI Leslie,

Colossus uses similar functionality, but not the same. If you are using a checkbox it would be possible to multiple selections, which is why a radio is typically used. If you want to allow for multiple selections on mobile, but not on desktop, then you will have to come up with some JavaScript to control the opening and closing based on screen size.

I may have not explained this very well. I was using the mobile open and close as an example (more of an accordion style). I'm thinking I may just have to "fake" it by creating an additional tab called "Close" which would then appear to close the open tab.