Боковая панель навигации - как свернуть и развернуть со стрелкой?

Question

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

свернуто

расширено

Answer 1

Я думаю, что это похожий вопрос, который вам нужен. Вы можете взять ссылку из Этот ответ

А для кнопки со стрелкой вы можете сделать некоторые изменения, такие как:

Javascript

 var toggleBtn = element.children[0]
 if(toggleBtn.classList.contains("fa-caret-right")) {
  toggleBtn.classList.add("fa-caret-left");
  toggleBtn.classList.remove("fa-caret-right");
  } else {
  toggleBtn.classList.add("fa-caret-right");
  toggleBtn.classList.remove("fa-caret-left");
}

Html

<a onclick="growDiv(this)" id="more-button"><i class="fa fa-caret-right" ></i></a>

Демо

Answer 2

В w3schools есть простое руководство по боковой навигации. Проверьте это здесь!