ImagesLesson 65Free preview
Tab Gallery
This lesson is part of How To · All levels
Summary
The gallery tab divides the images into several categories that can be selected through the tab button. When the tab is clicked, the appropriate panel is displayed and the other panel is hidden. This pattern helps users view specific content without loading new pages.
Key points
- The tab button saves the category on the data-paint attribute.
- The panel with the corresponding data is displayed, the rest is hidden.
- The hidden attribute is a simple way to hide the panel.
- The .active class and the selected aria mark the tab being selected.
- Role="tablist" and role="tab" clarify the structure for assistive technology.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.