-1

Was wondering how to accomplish the same effect as what is in Google Maps with the side panel navigation collapsing and expanding. When clicking the arrow the side panel nav expand and the arrow moves with it. Please see screenshots picture attached.

collapsed

collapsed

expanded

expanded

Syfer
  • 4,262
  • 3
  • 20
  • 37
vic
  • 9
  • 4

2 Answers2

0

w3schools has an easy-to-follow tutorial on a side-nav. Check it out here!

Gav Hern
  • 76
  • 1
  • 7
0

I think this is a similar question that you need. you can take reference from This answer

And for the arrow button, you can do some modification like:

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>

Demo

Sweta Unagar
  • 41
  • 4