🎯 Purpose
The Toggle widget provides collapsible sections that can show or hide content—ideal for FAQs, step-by-step guides, or information-dense pages where you want to save space and enhance accessibility.
⚙️ Core Features
Multiple Toggle Items
Create as many toggle items as needed, each with a title and hidden content area.Default Open State
Choose whether a particular item is open or closed when the page loads.Accordion Mode
Enable this option to ensure only one toggle can be open at a time. When one opens, others close automatically.
🎨 Styling Options
Toggle Titles
Customize typography—font, size, weight, spacing—along with normal and hover text colors, background, borders, and padding.Icons
Select icon style and alignment (left or right), adjust size, color, spacing, and define hover behavior for interactive feedback.Content Area
Style the two states: collapsed and expanded. Control typography, background, borders, padding, and text color differently for each state.
🛠️ Advanced Configuration
Responsive Design
Adjust typography, spacing, and padding for desktop, tablet, and mobile to ensure readability.Advanced Layout Controls
Use margin, padding, z-index, positioning, and motion effects to integrate the toggles seamlessly and enhance their appearance as users scroll or load content.
âś… Best Practices
Use toggles to make FAQs, instructions, or terms more digestible.
Keep titles concise and descriptive to make them intuitive.
Apply accordion mode for streamlined user experiences.
Style icons and expand backgrounds to match your site’s brand and offer visual cues.
Check responsiveness to ensure toggles remain functional and legible on all devices.
The Toggle widget empowers you to create a clean, interactive way to present collapsible content—improving readability and user experience without overwhelming your page.
