Tabs

Accordion horizontal tabs

Accordion horizontal tabs
  1. What are accordion tabs?
  2. How do I convert tabs to accordion in mobile view?
  3. What is an alternative to tabs?

What are accordion tabs?

Tabs are similar to Accordions in that they contain information that can be expanded and collapsed. Whereas Accordions are stacked vertically, Tabs are stacked horizontally. Both are organized as a Group and divided into Sections. Each Section makes up the "collapsible" or "expandable" content.

How do I convert tabs to accordion in mobile view?

Tabs on the side. This example brings the tabs at the left side by simply adding an extra class "tabs-side" at the ". tabbed-content" container. Just resize your screen below 800 pixels to see the tabbed interface transforming into an accordion.

What is an alternative to tabs?

If they're too long, then accordions are a better choice rather than tabs! Accordions placed on a horizontal space have too much space to accommodate long options and plenty of data, while on tabs if you choose long names as labels, they will look more or less like accordions only!

Multiple choice dropdown - when items are selected they are moved to the top of the dropdown
How do I select multiple options in a drop down list?How to select multiple options from a drop down list in HTML?What is the difference between list...
Many buttons in a mobile app
What are the buttons in an app called?What are buttons used for in apps?How big should buttons be on mobile?What are ghost buttons? What are the but...
Alternatives to a Product Add-On Carousel
Should you use a carousel on your website?What is a product carousel? Should you use a carousel on your website?Whatever you do, don't use an image ...