<div class="container">

  <section class="mx-auto my-5" style="max-width: 23rem;">

    <div class="card map-card">

      <div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">

        <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"

          style="border:0" allowfullscreen></iframe>

      </div>

      <div class="card-body closed px-0">

        <div class="button px-2 mt-3">

          <a class="btn btn-floating btn-lg living-coral text-white float-end" style="margin-right: .75rem;"><i

              class="fas fa-bicycle"></i></a>

        </div>

        <div class="bg-white px-4 pb-4 pt-3-5">

          <h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>

          <div class="d-flex justify-content-between living-coral-text">

            <h6 class="card-subtitle font-weight-light">A place to relax</h6>

            <h6 class="font-small font-weight-light mt-n1">25 min</h6>

          </div>

          <hr>

          <div class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">

            <div>

              <i class="fas fa-phone fa-lg mb-3"></i>

              <p class="mb-0">Call</p>

            </div>

            <div>

              <i class="fas fa-cat fa-lg mb-3"></i>

              <p class="mb-0">Love</p>

            </div>

            <div>

              <i class="far fa-grin-beam-sweat fa-lg mb-3"></i>

              <p class="mb-0">Smile</p>

            </div>

          </div>

          <hr>

          <table class="table table-borderless">

            <tbody>

              <tr>

                <th scope="row" class="px-0 pb-3 pt-2">

                  <i class="fas fa-map-marker-alt living-coral-text"></i>

                </th>

                <td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>

              </tr>

              <tr class="mt-2">

                <th scope="row" class="px-0 pb-3 pt-2">

                  <i class="far fa-clock living-coral-text"></i>

                </th>

                <td class="pb-3 pt-2"><span class="deep-purple-text me-2"> Closed</span> Opens 10 AM</td>

              </tr>

              <tr class="mt-2">

                <th scope="row" class="px-0 pb-3 pt-2">

                  <i class="fas fa-cloud-moon living-coral-text"></i>

                </th>

                <td class="pb-3 pt-2">Sunny weather tomorrow</td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </div>

  </section>

</div>

body {

  background-color: #f5f7fa;

}

​

.card.map-card .living-coral {

  background-color: #fa7268;

}

​

.card.map-card .living-coral-text {

  color: #fa7268;

}

​

.card.map-card .table th {

  width: 2rem;

}

​

.card.map-card .pt-3-5 {

  padding-top: 1.25rem;

}

​

.card.map-card .card-body {

  position: absolute;

  width: 100%;

  height: 80%;

  top: 20%;

  overflow: hidden;

  background-color: transparent;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

  -webkit-border-radius: 0 !important;

  border-radius: 0 !important;

}

​

.card.map-card .card-body.closed {

  top: 100%;

  height: 7.5rem;

  margin-top: -7.5rem;

}

​

.card.map-card .map-container {

  overflow: hidden;

  padding-bottom: 56.25%;

  position: relative;

  height: 0;

}

​

.card.map-card .map-container iframe {

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  position: absolute;

}

​

.card.map-card .button .btn-floating {

  margin-top: -1.5rem;

}

const card = document.querySelector('.map-card');

const cardBody = card.querySelector('.card-body')

​

card.addEventListener('click', () => {

  cardBody.classList.toggle('closed')

})