.toggleClass(). Переключение на сайте. jQuery

Любое переключение (изменение внешнего вида туда-сюда по клику мыши) на сайте можно реализовать простой штуковиной .toggleClass() от jQuery.

Суть проста – по какому-нибудь событию (клику или наведению мыши, например) он добавляет или удаляет к определенному объекту новый класс. А этот новый класс в 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);
}

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

$('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;

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

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

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