Share:

Accordions and Tabs

Accordions (Collapse components, in Bootstrap’s parlance) are widely used on the websites to manage a large amount of content or long navigation lists by splitting them in vertically-split blocks. Using the Bootstrap Collapse components you can either create accordions or a simple collapsible panel without writing any extra JavaScript code (Note: you still do need JavaScript to make the accordion work).

Accordions come very handy especially in mobile devices, where space is scarce and scrolling is slow, as you can show and hide content sections with a single click.

On the other hand, tab-based navigation provides an easy and powerful mechanism to handle huge amounts of content within a small area through separating content into different panes, where panes are visible one at a time.

The user can quickly access the content through clicking on each tab. Because of this, tabs are quite useful in desktop screens where you can place a rather large number of tabs in a row.

Tab/Collapse integration

While the Collapse component can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens.

A few weeks ago, a client requested a page which required integrating both components into a single one to create a nice content layout in all screen sizes. The resulting work is shown and explained in this article.

HTML blocks

For the Tab/Collapse to work, it’s necessary to create three blocks. The vertab-container div (the whole component’s container, used as CSS and JS selector), the vertab-menu section (tab navigation links) and the vertab-accordion section (accordion and content sections). For each content section, it’s necessary to create a link inside the list-group block and a vertab-content block.

 JavaScript Code

While most of the code required to make tabs and accordions work comes from Bootstrap, it is necessary to add some extra code to make the “component switch” between tabs and accordions view and navigation work.

One of the things to implement was to adjust styles for the tab-navigation links as well as adjusting the tabs container’s height (to take care of cases where tab content is larger than the container’s height).

When using a mobile device, navigation is performed by using an accordion-type component (Collapse), so styles need to be updated when accordion panels are switched by clicking on their headings.

Also, when switching among accordion panels, there’s a chance of ending up with the selected content box outside of the browser’s viewport. This is specially true when picking up a panel that’s located far from the current panel. To prevent this, an additional piece of code was added.

This little piece of code scrolls the page until the selected panel is positioned at the top of the viewport.

Managing screen size and orientation changes

As with many (if not most) web pages, the Tab/Collapse component adds some code to manage changes in screen size and orientation. Basically, what this piece of code does is adjust tabs/accordions styles, based on the current screen size.

CSS

Most of the CSS used in this article is meant to provide styling to the component. Only a small percentage of the CSS rules are used to make the component work as expected.

Final comments

You can see a working example of the Tab/Collapse in the following example at CodePen. There’s also a Github repository  where you can download the code and, if you want, provide some improvements to this code. Any comments or contributions will be more than welcome.

Share: