Wiki Article · Cinematic

Accordion (interface)

Accordion (interface) ek UI pattern hai jisme content multiple sections (panels) me split hota hai,…

Overview

Accordion (interface) — Quick Facts

📌

Field: Value

🎯

Type: UI pattern (collapsible sections)

⚡

Typical use: FAQs, settings groups, long forms…

🔑

Best for: When content groups independent hon

Topic 1

Overview

💡

content groups independent hon

🔑

user ko ek time me limited info…

Topic 2

Why it’s used

💡

Space saving: page short aur clean…

🔑

Progressive disclosure: user jab…

⚡

Organization: related…

Topic 3

How an accordion works (beginner)

🎯 Typical flow: 1) User header dekhta hai (collapsed state) 2) User header activate karta…

Topic 4

Common variants

⭐ | Variant | Description | Pros | Cons | |---|---|---|---| | Single-expand | Ek time me…

Topic 5

Accessibility considerations

💡

Header control truly interactive…

🔑

Expand/collapse state screen…

⚡

Focus order predictable rahe

🎯

Focus indicator visible rahe

Topic 6

Keyboard interaction model (conceptual)

💡

Tab: header controls tak move

🔑

Enter/Space: toggle…

⚡

Shift+Tab: previous control

Topic 7

ARIA & semantics (high-level)

💡

Control element ko…

🔑

Control aur panel ka relationship…

Topic 8

Implementation notes

💡

Clear headings/labels use karo…

🔑

Animations minimal rakho;…

⚡

Default state intentionally choose…

Topic 9

Testing checklist

📚 | Area | Quick check | Evidence | |---|---|---| | Keyboard | Tab se headers reachable |…

Topic 10

Common mistakes

💡

Header ko non-interactive element…

🔑

Focus indicator remove kar dena

⚡

Collapsed content ko visually hide…

🎯

Too much nested accordions…

Topic 11

Comparison: accordion vs tabs vs disclosure

🎯 | Pattern | Best when | Not ideal when | |---|---|---| | Accordion | Content groups…

Topic 12

Glossary

⭐ | Term | Simple meaning | |---|---| | Accordion | Expand/collapse panels ka UI pattern |…

Comparison

Comparison: accordion vs tabs vs disclosure

⚖️

Accordion: Content groups independent,…

⚖️

Tabs: Categories ko switch karna,…

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quiz — Question 1

Accordion (interface) ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

Accordion (interface) ka 'Type' kya hai?

Complete! 🎉

Accordion (interface) Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅