Переключение Нравится/Не нравится

  alexei 02/02/2022 - 10:12

Здесь вы узнаете, как сделать кнопку с переключением состояния нравится/не нравится при помощи CSS и JavaScript.


Кликните на иконку, чтобы переключить руку с пальцем вверх на руку с пальцем вниз (нравится/не нравится):


Как сделать переключение (скрыть/показать) элемент

Шаг 1) Добавляем HTML:


<!-- Добавляем библиотеку иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Элемент для переключения иконки нравится/не нравится -->
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

Шаг 2) Добавляем JavaScript:


function myFunction(x) {
  x.classList.toggle("fa-thumbs-down");
}