W3.CSSLesson 38Free preview

W3.CSS Tabs

This lesson is part of W3.CSS · All levels

Summary

Tabs display multiple panels in the same space, alternating on the user-pressed title. The title bar is generally made of a w3-bar containing the key items, while the active panel is determined by adding or removing the hidden class. This pattern is effective at displaying a lot of information without making a long page.

Key points

Tabs consist of a title bar and several interchangeable panels
Title items use the w3-bar that acts as a tab button
Class w3-hide determines which panel is not showing
The active tab is given a different background or line as a marker
Tabs save space and reduce scrolling requirements

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.