.toggleClass() в jQuery. Метод-бомба

Метод .toggleClass от jQuery это вообще бомбовая штука!

В css мне часто не хватало взаимодействия разных не взаимосвязанных элементов. Имею ввиду, чтобы при клике на один элемент, что-нибудь случалось с другим, не связанным никакими родительскими и дочерними вложенностями с тем элементом, на который кликаешь.

Суть метода .toggleClass проста – по какому-нибудь событию (клику или наведению мыши, например) он добавляет или удаляет к определенному объекту новый класс. А этот новый класс в css  вы можете оформить как душе угодно.

Это очень просто, но одновременно очень круто, я считаю.

Например, какое-нибудь выезжающее меню можно сделать на этой штуке. Изначально оно спрятано, а видна лишь иконка. Кликаешь по этой иконке – и это меню появляется, то есть к нему добавляется новый класс, который делает его видимым.

Html-код кнопки:

<div class="call-button"> <button>Кнопка</button>
  <div>
    <p>Viber</p>
    <p>WhatsApp</p>
    <p>Vk</p>
  </div>
</div>

Её css-код:

.call-button {
  position: fixed;
  bottom: 20%;
  right: 0;
  height: 150px;
  width: 150px;
  padding: 0;
  background-color: green;
  color: #fff;
  transform: translateX(100px);
  transition: 0.3s ease transform;
}

button {
  position: absolute;
  top: 50px;
  left: -50px;
  height: 50px;
  width: 100%;
  cursor: pointer;
  transform: rotate(-90deg);
  z-index: 999;
}

.call-button div {
  float: right;
  width: 80px;
  padding: 10px;
}

.call-button.open {
  transform: translateX(0);
}

И простой скрипт jQuery, благодаря которому это всё и происходит.

$('button').click(function () {
   $('.call-button').toggleClass('open');
 })

Логика скрипта такая:

$('button') – находится объект (тег button), затем .click(function(){ – означает, что при клике мышкой по только что найденному  объекту будет выполняться какая-нибудь функция, которая будет в фигурных скобках {}.

А внутри этой функции уже можно обратиться к любому другому объекту, с которым вы хотите что-либо сделать после этого клика мышки, в нашем случае это весь общий блок с классом call-button, который должен ездить туда -сюда, то есть пишем:

$('.call-button') – находим этот объект с классом call-button, .toggleClass('open') – на английском toggle означает тумблер, то есть вкл./выкл. То есть при каждом клике мышки класс прописанный в скобках ('open') будет то добавляться, то удаляться к тому объекту, к которому мы обратились, т.е. $('.call-button').

А этот класс open в своих стилях css мы уже может обрисовать как угодно. Самое элементарное это добавлять и удалять display: none;

Обратите внимание! Чтобы в скобках у метода .toogleClass имя класса уже пишется БЕЗ точки.

Итог: при нажатии на кнопку блок будет то показываться, то исчезать.

Но в моем случае нужно было, чтобы кнопка находилась справа и при клике мышкой выезжала, там показывалась некоторая инфа (кнопки разных мессенджеров) и снова при клике мышкой, заезжала обратно. Поэтому у меня стили заточены под перемещение.

Вот и всё по сути.