Problem description

Given HTML markup for an .accordion container with multiple .accordion-item elements—each containing a hidden checkbox input, a <label> serving as the header, and a .accordion-content div—write CSS to:

• Hide the native checkboxes.

• Style the <label> headers as semi-transparent, blurred panels with rounded corners and shadows.

• Set .accordion-content panels to max-height: 0 and overflow: hidden by default.

• When the corresponding checkbox is clicked, expand its content section with a smooth max-height transition.

Goal

Write CSS rules leveraging the hidden checkbox hack, backdrop-filter, and max-height transitions to build a glassmorphic accordion that expands and collapses panels without JavaScript.

Constraints

• Use only CSS (no JavaScript).

• Accordion width should be 100% of container, max-width: 500px, centered.

• Header background should be rgba(255,255,255,0.2) with backdrop-filter: blur(8px).

• Content background should be rgba(255,255,255,0.1) with backdrop-filter: blur(4px).

• Header and content panels have border-radius: 8px and box-shadow: 0 4px 6px rgba(0,0,0,0.1).

• Transition duration for max-height should be 0.4s ease.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.