HTML Content Boxes with Tabs
When designing websites, it's often necessary to display information that has several aspects or related components. The conventional approach is to simply stack the items vertically in the document, but that takes up a lot of screen space and makes it tedious for the user to scroll through the document in order to find the information he needs. So website designers often rely on methods like pop-up windows or boxes that display information only when the user requests it. But pop-up windows are sometimes blocked by browsers and users generally dislike them because they clutter up their screen and require an extra click to close them. Pop-up boxes are better, but they suffer from some of the same issues. A useful alternative to pop-up boxes is the tabbed content box which reveals different content when the user clicks on one of the tabs. There's a mix of CSS and JavaScript required, but the code presented in this tutorial can be modified for just about any situation you might encounter.
Show/Hide Tabbed Content with CSS & JavaScript
Content Box 1
Content Box 2
Content Box 3
Here's an example of a basic tabbed content box. There's three tabs, each of which displays its content when the user clicks on it. Try it and see. Notice how the color of the text of the currently selected tab is red to give the user a visual clue to the tab's function.
Content Box 1
This second box demonstrates a more practical example. In fact, this was the main reason I started to develop this code. It gives the user the choice of viewing a selected section of the web page, the underlying HTML mark-up, the page's embedded CSS rules, or the JavaScript. The code for both boxes is essentially identical. An important aspect of my design here was to allow multiple instances of the tabbed content box on a single page, which explains why all of the critical elements use only CSS class names and not id attributes. It all depends on the JavaScript function getElementsByClassName, which means it's not supported by versions of Internet Explorer before 9.0. If you must support IE8 and lower, you can use querySelectorAll with few limitations. I've just gotten tired of making my code more complicated just to support those old browsers.
To make this example, I used a small bit of additional JavaScript to generate the content for the HTML, CSS, and JavaScript tabs to illustrate how this code might be useful, but you could just as easily include whatever you like in the content divs. It also illustrates a limitation.
It's a good news/bad news situation. The good news is that the display expands vertically to display the content of the individual tab boxes so there's no limitation on the amount of content able to be displayed. The bad news is that the vertical expansion naturally tends to push the subsequent content out of the user's view. Another limitation is that this code does not degrade gracefully for browsers running with JavaScript disabled by default. You could add a noscript section to either notify the user or insert a special style section to set the content boxes to "display:block; position:relative" so that they're all visible and stacked vertically. Fortunately, less than 1-2% of users fall into this category, so I don't consider it as critical as it had been 5 or 10 years ago. The web has become so dependent on JavaScript that only the extremely paranoid run without it these days.
All of the necessary HTML, CSS, and JavaScript is embedded in this page because too many people have been hotlinking to my files. You can simply copy the CSS and JavaScript into separate external files to include them in your website.
NOTE: When you use tabs or other mechanisms to selectively hide and reveal your content, you need to be aware that Google gives much less weight to content that isn't visible to users when the page loads. That means you shouldn't include any critical content in those areas of your page that are initially hidden from view if you intend for users to find your pages for such content. This website design technique should mainly be used to display supplemental information.
This page was last modified on October 01, 2020
