Like expandable sections, tabs can be used as a means of progressive disclosure of information. They are particularly great at providing different categories of information that relate to the same subject.

There are quite a few open-source libraries that you can use to implement this. With the better ones, the tabs are even responsive. On a small screen or in a small browser window, the tabs automatically become an accordion.

  • Responsive Tab 1
  • Responsive Tab 2
  • Responsive Tab 3

This is the content of tab 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nibh sit amet risus scelerisque rutrum. Suspendisse a eros nulla. Integer non ullamcorper orci. Pellentesque at commodo diam. Sed lacinia massa non egestas scelerisque. Fusce in ipsum eget purus ultrices sollicitudin eu eu leo. Fusce metus tellus, suscipit quis posuere at, consequat sed est. Praesent lacinia ullamcorper lacus. Morbi dictum ante viverra, vestibulum erat a, ornare risus.

Anything can go here.

This is the content of tab 2.

Mauris lacinia nisl mi, convallis convallis sem pharetra eget. Phasellus tincidunt est commodo lacinia gravida. Fusce maximus auctor orci et porta. Mauris hendrerit massa ac neque rutrum, ultrices finibus nisi congue. Sed facilisis suscipit urna non pharetra. Quisque id diam at mauris feugiat volutpat. Pellentesque venenatis nunc ac dictum eleifend.

This is the content of tab 3.

Maecenas tempor arcu sit amet ipsum accumsan pretium. Sed id pretium sapien, vitae luctus ipsum. Vestibulum nec elementum justo. Praesent orci nibh, sagittis id nibh eu, condimentum ullamcorper felis. Sed lacinia cursus rutrum. Vestibulum laoreet finibus iaculis. Etiam rhoncus maximus pharetra. Curabitur eu mollis est, quis faucibus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;


Below the tabs, the normal content continues …