# Tabs #4

### Component Structure

* **TB4 COMPONENT (Section)**: Serves as the main wrapper for the tabs component, facilitating alignment and spacing. It is styled with the CSS class `tb4__component`, which may define height, alignment, or other properties to ensure the component occupies the full viewport height and is centered.
* **TB4 CONTAINER (Container)**: Nested within the TB4 COMPONENT, this container holds the tabs and content sections. It is associated with the `tb4__container` CSS class for additional styling flexibility.
* **TB4 ACCORDEON (Tabs-nested)**: This element acts as the accordion for holding tabs content, ensuring a responsive layout. Styled with `tb4__tabs`, it defines the border, layout direction, and spacing between tabs.
* **TB4 CONTENT (Block)**: These blocks contain the individual content for each tab, hidden or shown based on active tab selection. Each content block is styled with `tb4__content` for consistent borders and padding.
* **TB4 CONTENT INNER (Block)**: Inside each TB4 CONTENT, this layer serves to structure the content further, providing a foundation for images and text. It uses the `tb4__content-inner` class for width, height, and positioning.
* **TB4 IMAGE (Image)**: These elements display images within each content section. The `tb4__image` class applies styles for width, height, and object-fit properties.
* **TB4 TEXT WRAPPER (Div)**: Wraps text elements, such as headings and paragraphs, within the content sections. Styled with `tb4__content-text`, it positions and styles the text content.
* **TB4 MENU (Block)**: Contains the navigation for the tab component, including menu headings and navigation items. Styled with `tb4__menu` for layout adjustments.
* **TB4 MENU TITLE (Div)**: Individual titles within the menu, allowing for interaction with the tabs. These are styled with `tb4__menu-title` for width and positioning.

### Animation Structure

* **TB4 - CONTENT IMAGE**: Targets images within the tabs, animating from a clipped state to fully visible. The animation emphasizes the content's appearance with a subtle scale effect, enhancing visual interest.
* **TB4 - CONTENT TEXT**: Animates the text content's appearance within each tab. It scales and fades text in for a smooth transition, making the content appear dynamically as the tab is selected.

### Events

* **TB4 - IMG**: Utilizes a mutation observer to trigger animations when the tab's content changes. It restarts the "TB4 - CONTENT IMAGE" and "TB4 - CONTENT TEXT" animations, ensuring that content transitions are initiated by user interaction with the tabs.


---

# 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-4.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.