Tabbed

Below is an example of how to setup a .fs-tabbed tabbed content block. By default, tabbed content will display in an open style.

Information Note that the tabbed type block and the menu type block are separate. The examples in this article combine tabbed content with the various styles of included with the menu block.

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    


        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper. 
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        

        

            
Mauris justo leo, bibendum interdum pellentesque quis, laoreet in ipsum. Etiam tristique maximus lectus ut laoreet. Vivamus eget nulla eget lectus rhoncus laoreet. Nullam vel tempor quam. Phasellus quis felis odio. Etiam scelerisque orci ut sem lacinia.
            
Nec consectetur nunc placerat. Duis pretium dolor sed leo ullamcorper lacinia eu vitae dolor. Duis non lacus facilisis dolor tempor euismod in nec dui. Sed nec augue massa. Class aptent taciti sociosqu ad litora torquent per.
        

        

            
Aliquam ut massa in dolor varius pretium eu pellentesque mauris. Nulla id enim et nulla auctor vehicula. Mauris vel enim at augue sagittis ultrices eu faucibus quam. Suspendisse vel condimentum orci. Phasellus ultricies dui sed cursus tincidunt.
            
Nam pellentesque risus ipsum, sed sagittis dolor malesuada eget. Sed at turpis risus. Sed nisl sem, posuere eu pulvinar vel, fringilla quis augue. Suspendisse nec tortor condimentum, consectetur lorem quis, convallis dui. In tristique ante vel nulla.
        

        

            
Etiam non metus convallis, vestibulum nunc sit amet, maximus mi. Curabitur varius nec ex sit amet elementum. Morbi convallis tincidunt lorem sed varius. Aenean ac ullamcorper sem, et pulvinar libero. Aenean iaculis rhoncus molestie.
            
Mauris aliquam erat eu dolor euismod, efficitur viverra odio euismod. Maecenas ac imperdiet tortor, eget ultricies diam. Vestibulum sit amet odio sed metus finibus consequat. Phasellus congue ornare orci, eget interdum enim consectetur lacinia.
        

    

And below you can see how tabs respond when placed in a parent element with a dark background and class text-light.

Alternate Navigation

Your .fs-tabbed element can include any of the standard navigation elements.

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

Framed Tabs

By adding class tabs-framed to your .fs-tabbed element, you can bound your tabbed content within a box with a standardized background color, for better readability.

And below you can see how framed tabs respond when placed in a parent element with a dark background and class text-light.

Alternate Navigation

Your .fs-tabbed.tabs-framed element can also include any of the standard navigation elements.

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

    

        
Crosby
        
Malkin
        
McDavid
        
Ovechkin
    

    

Fixed Height Tabs

In some circumstances it can be annoying to have content on the page jumping around when switching between tabbed content that varies in length. In these cases, you can add the class tabs-fixed-height to your .fs-tabbed element; this will match the height of all tabbed content to the tallest one.

    

        
First Tab
        
Second Tab
    

    


        

            
This tab doesn't have a lot of content, but is filling to the height of the second tab, which is the largest.
        

        

            
And this tab has much more content than the first.
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper. 
            
Mauris justo leo, bibendum interdum pellentesque quis, laoreet in ipsum. Etiam tristique maximus lectus ut laoreet. Vivamus eget nulla eget lectus rhoncus laoreet. Nullam vel tempor quam. Phasellus quis felis odio. Etiam scelerisque orci ut sem lacinia.
            
Nec consectetur nunc placerat. Duis pretium dolor sed leo ullamcorper lacinia eu vitae dolor. Duis non lacus facilisis dolor tempor euismod in nec dui. Sed nec augue massa. Class aptent taciti sociosqu ad litora torquent per.
        

    

Deep Linking Tabs

Tab deep linking allows you to open a specific tab on page load by passing in the cooresponding hashtag in the URL. For this to work you need to add class tabs-deep-link to your .fs-tabbed element. And then when you link to your page containing the tabbed content, you'll add a hash to your URL formatted like #tab_{id of tab to open}.

For example, the following set of tabs has three content panes with the ID's, alpha, beta, and theta. If we wanted to open the beta pane on page load, we would link to tabbed.html#tab_beta.

As a test, click here to reload this page with the Beta tab open.

    

        
Alpha
        
Beta
        
Theta
    

    


        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper. 
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        

        

            
Mauris justo leo, bibendum interdum pellentesque quis, laoreet in ipsum. Etiam tristique maximus lectus ut laoreet. Vivamus eget nulla eget lectus rhoncus laoreet. Nullam vel tempor quam. Phasellus quis felis odio. Etiam scelerisque orci ut sem lacinia.
            
Nec consectetur nunc placerat. Duis pretium dolor sed leo ullamcorper lacinia eu vitae dolor. Duis non lacus facilisis dolor tempor euismod in nec dui. Sed nec augue massa. Class aptent taciti sociosqu ad litora torquent per.
        

        

            
Aliquam ut massa in dolor varius pretium eu pellentesque mauris. Nulla id enim et nulla auctor vehicula. Mauris vel enim at augue sagittis ultrices eu faucibus quam. Suspendisse vel condimentum orci. Phasellus ultricies dui sed cursus tincidunt.
            
Nam pellentesque risus ipsum, sed sagittis dolor malesuada eget. Sed at turpis risus. Sed nisl sem, posuere eu pulvinar vel, fringilla quis augue. Suspendisse nec tortor condimentum, consectetur lorem quis, convallis dui. In tristique ante vel nulla.