JavaScript menu arrow issue

I am trying to create simple menu along with arrow function in javascript. I want that, when the user clicks the menu the arrow must turn and point down.

How can I do that?

Here is what I have so far. As you can see the arrow does not turn down:

https://codepen.io/digitalgoed/pen/qBRjxxG

const openBtn = document.querySelector(".open");
const trips = document.querySelector(".trip");
const closeBtn = document.querySelector(".model-btn");

openBtn.addEventListener("click", function() {
  trips.classList.add("show");
});

closeBtn.addEventListener("click", function() {
  trips.classList.remove("show");
});
.pricing-button {
  border: 1px solid #9dd1ff;
  border-radius: 10px;
  color: #348efe;
  display: inline-block;
  padding: 15px 35px;
  text-decoration: none;
  margin: 25px 0;
  transition: background-color 200ms ease-in-out;
}

.pricing-button.is-featured {
  background-color: #48aaff;
  color: white;
}

.open,
.model-btn {
  border: none;
  background: darkturquoise;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  border-radius: 5px;
}

.trip {
  /* background: red; */
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

.show {
  opacity: 1;
  pointer-events: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="#/" class="pricing-button is-featured open"> Free trial <i class="fa fa-arrow-circle-right" style="font-size:18px;"></i>
</a>
<ul class="pricing-features trip">
  <li class="pricing-features-item"> sleeps</li>
  <li class="pricing-features-item">workers for more powerful apps</li>
  <button class="model-btn">Close</button>

</ul>

Answer

You need to add some CSS and javascript code check below code

const openBtn = document.querySelector(".open");
const trips = document.querySelector(".trip");
const closeBtn = document.querySelector(".model-btn");

openBtn.addEventListener("click", function () {
  trips.classList.add("show");
});

openBtn.addEventListener("click", function () {
  openBtn.classList.add("show");
});

closeBtn.addEventListener("click", function () {
  trips.classList.remove("show");
});
closeBtn.addEventListener("click", function () {
  openBtn.classList.remove("show");
});
.pricing-button {
  border: 1px solid #9dd1ff;
  border-radius: 10px;
  color: #348efe;
  display: inline-block;
  padding: 15px 35px;
  text-decoration: none;
  margin: 25px 0;
  transition: all 200ms ease-in-out;
}
.pricing-button i{
transition: all 200ms ease-in-out;
}
.pricing-button.is-featured {
  background-color: #48aaff;
  color: white;
}

.open,
.model-btn {
  border: none;
  background: darkturquoise;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  border-radius: 5px;
}

.trip {
  /* background: red; */
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

.show {
  opacity: 1;
  pointer-events: auto;
}
a.pricing-button.show i {
    transform: rotate(
90deg
);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="#/" class="pricing-button is-featured open"> Free trial <i class="fa fa-arrow-circle-right" style="font-size:18px;"></i>
</a>
<ul class="pricing-features trip">
  <li class="pricing-features-item"> sleeps</li>
  <li class="pricing-features-item">workers for more powerful apps</li>
  <button class="model-btn">Close</button>

</ul>