DOM Manipulation

aria-expanded

aria-expanded

Expandable controls should expose their state with aria-expanded. The visible panel state and the attribute should change together.

If the panel opens but the attribute stays false, the DOM is giving conflicting information.

Your task: When the details button is clicked, toggle the panel's hidden property. Set the button's aria-expanded value to true when the panel is visible and false when it is hidden.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

aria-expanded

Expandable controls should expose their state with aria-expanded. The visible panel state and the attribute should change together.

If the panel opens but the attribute stays false, the DOM is giving conflicting information.

Your task: When the details button is clicked, toggle the panel's hidden property. Set the button's aria-expanded value to true when the panel is visible and false when it is hidden.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Console

Run code to see output.