# Tabs #3

### Component Structure

* **TB3 COMPONENT (section)**: This serves as the primary container, styled with `.tb3__component`, ensuring that the tabs occupy the full viewport height and are centered within the view.
* **TB3 CONTAINER (container)**: Acts as the layout manager within the component, applying `.tb3__container` styling to organize content effectively.
* **TB3 TABS (tabs-nested)**: The core of the component, where the tab functionality is initialized, utilizing `.tb3__tabs` for the base styling.
* **TB3 MENU (block)**: Houses the tab menu items, facilitating navigation between tabs, marked with `.tb3__menu`.
  * **TB3 MENU ITEM (div)**: Individual tab selectors, each wrapped in `.tb3__menu-item`.
  * **TB3 MENU TEXT (text-basic)**: The text labels for each tab, carrying `.tb3__menu-text` styling.
* **TB3 CONTENT (block)**: The container for the content sections corresponding to each tab, adorned with `.tb3__content`.
  * **TB3 CONTENT INNER (block)**: Encloses the specific content for each tab, including images and text, highlighted with `.tb3__content-inner`.
  * **TB3 IMG (image)**: Visual elements within tab content, using `.tb3__img` to ensure proper display and scaling.
  * **TB3 CONTENT TITLE (heading)** and **TB3 CONTENT TEXT (div)**: Textual content for each tab, offering detailed information or descriptions, styled respectively with `.tb3__content-title` and `.tb3__content-text`.

### Animation Structure

* **TB3 - CONTENT TEXT**: Animates the content text scaling from 0 to 1, providing a smooth reveal effect for textual information within each tab.
* **TB3 - CONTENT TITLE**: Fade-in and positional animation for the content titles, enhancing the visual transition between tabs.
* **TB3 - CONTENT IMAGE**: Applies a clipping path animation to images within tabs, coupled with a slight rotation for a dynamic unveiling of visual content.

### Event Structure

* **TB3 - IMG**: An event-based trigger that restarts the defined animations (`TB3 - CONTENT IMAGE`, `TB3 - CONTENT TITLE`, and `TB3 - CONTENT TEXT`) upon tab selection, ensuring that each content reveal is accompanied by engaging animations for an immersive user experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/tabs/tabs-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.