javascript button scroll collapsable js-scrollintoview

scrollIntoView() when opening a collapsible element

I am creating a website with a collapsible element, that when clicked, expands beyond view. I want the page to scroll down, so that you can see the content it opened, but can't seem to work it...

This is my code: on codepen

I tried few solutions I found online, but none seemed to make any difference.

It's my first project ever and I would like to use pure javascript, as I am not familiar with jQuery or React yet.

<button class="pigment row g-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleFooter" aria-expanded="false" aria-controls="collapsibleFooter">
    <h1>Pigment Hotel</h1>
</button>

<footer class="collapse" id="collapsibleFooter">

    <div class="row row-cols-1 row-cols-sm-2">
        <div class="text-center contact">
            <h2>CONTACT US</h2>
            <h3><i class="bi bi-telephone-fill"></i>+45 4545 4545</h3>
            <h3><i class="bi bi-instagram"></i><a href="instagram.com" class="text-decoration-none"> Pigment Hotel</a></h3>
            <h3><i class="bi bi-facebook"></i><a href="facebook.com" class="text-decoration-none"> Pigment Hotel</a></h3>
            <h3><i class="bi bi-envelope"></i><a href="mailto:info@pigmenthotel.com" class="text-decoration-none"> info@pigmenthotel.com</a></h3>
            <h2>ABOUT US</h2>
            <h3><a href="rest.html" class="text-decoration-none">Rest</a></h3>
            <h3><a href="train.html" class="text-decoration-none">Train</a></h3>
            <h3><a href="eat.html" class="text-decoration-none">Eat</a></h3>
            <h3><a href="relax.html" class="text-decoration-none">Relax</a></h3>
        </div>
        <div class="text-center findus">
            <h2>FIND US</h2>
            <h3>Vesterbrogade 41</h3>
            <h3>1620 København V</h3>
            <img src="hotel.jpg" class="hotelimage img-fluid" alt="photograph of the hotel seen from the street">
        </div>
    </div>
    <h3 class="col-12 text-center pigmenthotel2024">Pigment Hotel 2024</h3>

    <div class="row row-cols-1 row-cols-sm-4">
                      
</footer>

const element = document.getElementById("collapsibleFooter");
pigment.addEventListener("click", (event) => {
  element.scrollIntoView();
  element.scrollIntoView(false);
  element.scrollIntoView({ block: "end" });
  element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
});

Solution

Several problems can be observed with your JavaScript code:

The pigment variable has not been defined. One must reference defined variables.
Even if the pigment variable was defined, the .scrollIntoView() is called too early, before the element is visible "enough"
You seem to be calling .scrollIntoView() multiple times. Consider only calling it once with the options you'd like.

Since you'd like to scroll to the collapsible when it is shown, consider listening for the show.bs.collapse that Bootstrap will fire on the element once it is fully shown, and then scroll into view then:

const element = document.getElementById("collapsibleFooter");
element.addEventListener("shown.bs.collapse", (event) => {
  element.scrollIntoView({
    behavior: "smooth",
    block: "end",
    inline: "nearest"
  });
});

body {
  color: white;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}

#half {
  font-family: 'Raleway', sans-serif;
}

.row {
  width: auto;
  padding: 0;
  margin: 0;
}

.rest {
  height: 25vh;
  background-color: #ff4d00;
  position: relative;
}

.rest h1 {
  font-size: 4rem;
  color: #FF7D6C;
  position: absolute;
  bottom: -10px;
  right: 20px;
}

.rest:hover>#resttext {
  font-size: 12vw;
  ;
}

.train {
  height: 45vh;
  background-color: #090081;
  position: relative;
}

.train h1 {
  font-size: 4rem;
  color: #ff4d00;
  position: absolute;
  top: 0px;
  right: 10px;
  display: inline;
}

.train:hover>#traintext {
  font-size: 12vw;
}

.eat {
  height: 45vh;
  background-color: #795CA8;
  position: relative;
}

.eat h1 {
  font-size: 4rem;
  color: #DEDE00;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  position: absolute;
  bottom: 10px;
  right: 0px;
  margin: 0;
  display: inline;
}

.eat:hover>#eattext {
  font-size: 12vw;
}

.relax {
  height: 70vh;
  background-color: #FF7D6C;
  position: relative;
}

.relax h1 {
  font-size: 4rem;
  color: #E8B8CE;
  position: absolute;
  bottom: -10px;
  right: 10px;
}

.relax:hover>#relaxtext {
  font-size: 12vw;
}

.pigment {
  text-align: center;
  height: 30vh;
  background-color: #E8B8CE;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
}

.pigment h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 12vw;
  vertical-align: middle;
  color: #090081;
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

footer {
  /* height: 530px; */
  background-color: #E8B8CE;
  font-family: 'Raleway', sans-serif;
  color: #090081;
}

footer h2 {
  font-size: 20px;
  margin-top: 50px;
  margin-bottom: 40px;
}

footer h3 {
  font-size: 13px;
}

footer a {
  color: #090081;
}

.hotelimage {
  /* width: 25vw; */
  width: 250px;
  height: auto;
  margin-bottom: 50px;
}

@media screen and (max-width: 576px) {
  /* body {
      overflow:auto ;
    } */
  .rest {
    height: 25vh;
  }
  .train {
    width: 50vw;
    height: 25vh;
  }
  .eat {
    width: 50vw;
    height: 25vh;
  }
  .relax {
    height: 25vh;
  }
  .pigment {
    height: 25vh;
  }
  .pigment h1 {
    font-size: 15vw;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Passions+Conflict&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Pigment Paradise Hotel</title>
</head>

<body>
  <div id="navigation">

    <div id="half" class="col block-contain">

      <div class="row g-0" id="row1">

        <div class="col-12 col-sm-8">

          <div class="row">

            <a href="rest.html" class="col-12 rest">
              <h1 id="resttext">rest</h1>
            </a>

          </div>

          <div class="row g-0">

            <a href="train.html" class="d-inline col-12 col-sm-8 train">
              <h1 id="traintext">train</h1>
            </a>


            <a href="eat.html" class="d-inline col-12 col-sm-4 eat">
              <h1 id="eattext">eat</h1>
            </a>

          </div>

        </div>

        <a href="relax.html" class="col-12 col-sm-4 relax">
          <h1 id="relaxtext">relax</h1>
        </a>

      </div>

    </div>

    <!-- <div class="row g-0" id="row2"> -->

    <button class="pigment row g-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleFooter" aria-expanded="false" aria-controls="collapsibleFooter">
                    <h1>Pigment Hotel</h1>
                </button>

    <!-- </div>     -->

  </div>


  </div>




  <footer class="collapse" id="collapsibleFooter">

    <div class="row row-cols-1 row-cols-sm-2">
      <div class="text-center contact">
        <h2>CONTACT US</h2>
        <h3><i class="bi bi-telephone-fill"></i>+45 4545 4545</h3>
        <h3><i class="bi bi-instagram"></i><a href="instagram.com" class="text-decoration-none"> Pigment Hotel</a></h3>
        <h3><i class="bi bi-facebook"></i><a href="facebook.com" class="text-decoration-none"> Pigment Hotel</a></h3>
        <h3><i class="bi bi-envelope"></i><a href="mailto:info@pigmenthotel.com" class="text-decoration-none"> info@pigmenthotel.com</a></h3>
        <h2>ABOUT US</h2>
        <h3><a href="rest.html" class="text-decoration-none">Rest</a></h3>
        <h3><a href="train.html" class="text-decoration-none">Train</a></h3>
        <h3><a href="eat.html" class="text-decoration-none">Eat</a></h3>
        <h3><a href="relax.html" class="text-decoration-none">Relax</a></h3>
      </div>
      <div class="text-center findus">
        <h2>FIND US</h2>
        <h3>Vesterbrogade 41</h3>
        <h3>1620 København V</h3>
        <img src="hotel.jpg" class="hotelimage img-fluid" alt="photograph of the hotel seen from the street">
      </div>
    </div>
    <h3 class="col-12 text-center pigmenthotel2024">Pigment Hotel 2024</h3>

    <div class="row row-cols-1 row-cols-sm-4">



  </footer>



  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>