close

test2test2test

<head><style> $color__main: #444; $color__active: #676c6e; $background__active: none; $width__tabs-side: 400px; $breakpoint: 800px; @mixin tab-active() { background: #8abe25; color: #fff; } /* Some styles to make this demo look pretty (or at least decent) If you want to style everything yourself, you shouldn't need these */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900'); body { padding: 1em; background: none; color: #444; font-family: 'Roboto', sans-serif; font-weight: 100; a { text-decoration: none; color: #fff; } p { margin-top: 0; } div { box-sizing: border-box; } } h2 { margin: 2em auto 0; text-align: center; } .tabbed-content { background: #fff; box-shadow: none; max-width: 1600px; padding: 1em; margin: 1em auto; } .tabs { ul { margin: 1em; padding: 0 0 1em 0; font-weight: normal; li { background: #7B7B7B; a { padding: .5em 1em; &:hover, &.active { @include tab-active(); } } } } } .item { margin-bottom: 2px; &::before { cursor: pointer; font-weight: bold; background: $background__active; padding: .5em; display: block; } &.active { &::before { @include tab-active(); } .item-content { padding: 1em; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } } } @media all and (min-width: $breakpoint ) { .item { &.active { .item-content { padding-top: 0; } } } .tabs-side { .tabs { li { margin-bottom: 2px; } } } } /* The project specific CSS starts here This is the minimum CSS that you will need in order for this to work */ // Accordion for small screens (mobile first principle) .tabbed-content { .tabs { display: none; } .item { min-height: 2em; // We need a minimum height for each item or else the accordion buttons would dissapear width:400px; &::before { content: attr(data-title); // Instead of polluting the HTML with a duplicate set of tabs, we get the accordion using the data-title attribute. } .item-content { // We hide the inactive content with zero opacity instead of "display:none" because this allows us to apply transition effects if we want. opacity: 0; visibility: hidden; height: 0; width:400px; } &.active { .item-content { opacity: 1; visibility: visible; height:auto; width:400px; } } } } // Tabs for larger screens @media all and (min-width: $breakpoint) { .tabbed-content { .tabs { display: block; li { display: inline-block; a { display: block; } } } .item { min-height: 0; &::before { display: none; } } // Tabs on the side (works only on big screens) &.tabs-side { .tabs { width: $width__tabs-side; float: left; li { display: block; } } .item { margin-left: $width__tabs-side; } } } } </style></head>

Tabs on top

A simple solution for having tabbed content on a large screen but turn it into accordion on a smaller one. Just resize your screen below 800 pixels to see the tabbed interface transforming into an accordion.

In order to keep the HTML as clean as possible, without duplicating elements, we use element attributes as CSS content to display the accordion tabs.

Tab 2 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Tab 3 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.