Jquery события по клику в инлайн скрипте

Question

Хочу реализовать сворачиваемый и разворачиваемый текст + анимацию элемента на jQuery (чтобы плюс переворачивался) инлайн скриптом (сразу в html). Но почему-то срабатывает только одна часть кода. Сам jquery не разбирал, возможно, не знаю каких-то основ. Буду благодарен за помощь.

.container {
  max-width: 200px;
}

.container__title {
  cursor: pointer;
}

.container__deco {
  width: 22px;
  height: 16px;
  cursor: pointer;
  float: right;
  transition: all 200ms ease 0s;
}

.container__info {
  display: none;
}

.rotate {
  transform: rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="container__title" onclick="$(this).next().slideToggle(250);" onclick="$(.container__deco).toggleClass('rotate')">Нажать сюда<span class="container__deco">+</span></div>
  <p class="container__info">Сворачиваемый текст</p>
</div>

Answer 1

Ошибки две:

не нужно указывать два раза атрибут onclick. Весь код можно написать в одом атрибуте
Вы забыли указать selector в кавычках (двойных или одинарных - значения не имеет)

.container {
  max-width: 200px;
}

.container__title {
  cursor: pointer;
}

.container__deco {
  width: 22px;
  height: 16px;
  cursor: pointer;
  float: right;
  transition: all 200ms ease 0s;
}

.container__info {
  display: none;
}

.rotate {
  transform: rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="container__title" onclick="$(this).next().slideToggle(250); $('.container__deco').toggleClass('rotate');">Нажать сюда<span class="container__deco">+</span></div>
  <p class="container__info">Сворачиваемый текст</p>
</div>

БЛОГ НА HUSL

Jquery события по клику в инлайн скрипте

Ответы (1 шт):