Как поменять положение элементов при применении скрипта JS?

Question

[Анна]

Здравствуйте!
Не получается реализовать показ и скрытие кнопки по клику.

<div class="icon-bar">
<span class="social-title"></span>
  <a href="#" class="facebook"><i class="fa fa-paper-plane"></i></a>
  <a href="#" class="twitter"><i class="fa fa-whatsapp"></i></a>
  <a href="#" class="google"><i class="fa fa-envelope"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-phone"></i></a>
  <a href="#" class="youtube"><i class="fa fa-map-marker"></i></a>
</div>

/* Фиксированная панель значков */
.icon-bar  {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.icon-bar .social-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 30px;
  bottom: 0;
  width: 60px;
  height: 60px;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
background-image: url(/images/icons/comment.png);
}


/* Стиль ссылок на панели значков */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
  display: none;
}


/* Стиль иконки социальных медиа с цветом */
.icon-bar a:hover {
  background-color: var(--dark-color);
}

.facebook {
  background: #0088cc;
  color: white;
}

.twitter {
  background: #075e54;
  color: white;
}


.google {
  background: var(--hover-color);
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

$('.icon-bar').click(function() {
	$('.icon-bar>a').toggle('display');
});

Как это выглядит без скрипта (и как задумывалось):
элементы расположены вертикально, кнопка, вызывающая их не мешает


Как выглядит после применения скрипта:
элементы вдруг становятся inline (видно в панеле в браузере)


После долгих попыток исправить ситуацию, сдаюсь и обращаюсь за помощью!
Что нужно исправить или дописать в скрипте, чтобы элементы выстраивались вертикально, и не превращались в inline?
Заранее благодарю за помощь!

Answer 1

[Rsa97]

Поскольку у вас изначально установлено display: none, то toggle просто убирает свойство display и оно становится дефолтным для a, то есть inline.
Варианты:
- поместить все иконки в общий div и переключать его;
- переключать класс, на основе которого в CSS менять свойство display.

Из ошибок с ходу:
- тэг i не стоит использовать для иконок, семантически он предназначен для выделения фрагмента текста, например технического термина или идиоматическтого выражения;
- 'display' в первом параметре toggle не имеет смысла, там может быть длительность переключения, объект с параметрами или логическое значение, но не произвольная строка.

Comments

[Анна]

Спасибо большое!
Удалось исправить проблему доступными средствами)) У меня вышло не идеально, конечно, - но все-таки вертикального положения удалось добиться) Единственное, что хотелось бы подкорректировать - это "прыгающее" появление значков - наверное, что из-за toggle. Но addClass вместо toggle не работает...
Вот эта конструкция переключает значки, но появляется при этом сначала сжимаясь, а потом увеличиваясь и приходит в нормально положение.
Может быть, есть какие-то стандартные решения появления класса active ?)

$('.icon-bar').click(function() {
	$('.icon-bar>a').toggle('.active');
});

[Ankhena]

Дополню, что он не просто убирает display, а конкретно его дописывает через атрибут style. На тот, который был до none, т.е. в данном случае на inline.

Как воспринимается .toggle( display ) написано прям тут https://api.jquery.com/toggle/

За переключение классов очень много раз плюсую.

[Rsa97]

Ankhena, Явно написано про .toggle(Boolean display), в коде автора .toggle('display').

[Rsa97]

Анна, .toggleClass('active')
https://api.jquery.com/toggleClass/