Skip to content
Learn Netverks

Lesson

Step 21/36 58% through track

menu-accordion

Menu and accordion

Last reviewed Jun 1, 2026 Content v20260601
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches Menu and accordion—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Menu and accordion in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Menu and accordion in your own words.

Foundation menus style vertical and horizontal link lists: menu, menu vertical, menu horizontal, active, and is-dropdown-submenu for nested flyouts (with JS).

Accordion component

Accordions collapse FAQ and settings sections: wrapper accordion, items with accordion-item, title accordion-title, content accordion-content, controlled by data-accordion attributes.

  • One open panel: data-accordion data-allow-all-closed="false"
  • Deep links: set id on titles for hash navigation

Important interview questions and answers

  1. Q: menu vs drilldown vs accordion?
    A: menu is general navigation styling; drilldown handles multi-level sliding panels; accordion expands inline sections in place.
  2. Q: Can accordion work without JS?
    A: No—the plugin toggles is-active classes and ARIA attributes; CSS shows structure but not interaction.

Self-check

  1. What three classes name an accordion section’s title and body?
  2. Which attribute initializes accordion behavior?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Accordion vs tabs?
  • Keyboard support gaps?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump