> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/content-and-information/collapsible-content.md).

# Collapsible Content

The **Collapsible Content Section** allows you to display structured information in expandable sections, improving readability and user interaction. It's ideal for presenting product details, FAQs, service guides, and more.

***

### 🎯 Feature Overview

**▸ Color Scheme**

Choose or customize a color scheme to define the visual styles of all elements in the block, including background and text colors. Align the palette with your brand’s visual identity for a cohesive look.

***

### 🧱 Block Structure

**Header Section (Optional)**

Use the header area to add contextual or introductory content. The following content blocks are supported:

* Badge Group (e.g., “New”, “Hot”)
* Button / Button Group
* Countdown Timer
* Description
* Discount Code
* Follow Us (social prompt)
* Heading / Subheading
* Highlighted Statistics (e.g., user counts, sales)
* Icon / Icon with Text
* Keywords
* Link Group / Link Text
* Social Media List
* Video Button
* Spacer (for padding/spacing)

***

**Collapsible Tab List**

This is the main area where the expandable content is displayed. You can add multiple **tab groups**, each consisting of the following elements:

**▪ Tab Group Title**

* Acts as the main heading for each group
* Option to add icons, images
* Supports title customization (style, alignment)

**▪ Collapsible Tabs**

* **Title**: Acts as the clickable element to expand/collapse
* **Content**: The body shown when the tab is expanded
* Option to set **default open state** (expanded or collapsed by default)

***

### ✅ Best Practices

* Use clear groupings to avoid overwhelming the user with too much information at once.
* Collapsible sections improve loading and visual clarity, especially for content-heavy pages.
* Combine background images and brand-aligned color schemes for an engaging appearance.
* Use the header section to guide users and highlight the theme or purpose of the collapsible content.