MoreLesson 222Free preview

Toggle Like/Dislike

This lesson is part of How To · All levels

Summary

A toggle like/dislike is a pattern of reactive buttons that can be active and inactive, usually accompanied by a calculator. JavaScript adds or removes active classes and updates numbers when a button is clicked. To avoid confusion, the status of the button needs to be reflected in the aria-pressed and like/dislike attributes not active simultaneously.

Key points

Save the status of each button and update the number when it changes
Use classList.toggle to change the active view
Set the air-pressed to let the button status be known to the screen reader
When one button is selected, disable the opposite button.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.