boxes

<html>
  <head>
    <title>List of Colors</title>
    <style>
      .robi {
        width: 200px;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .box{
        width: 200px;
        height: 50px;
        position: relative;
        display: block;
        background-color: red;
        margin: 10px 0;
        cursor: pointer;
        transition: .3s;
      }
      .opened{
          height: 150;
          background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="robi">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box opened"></div>
    </div>
    <script>
        let boxes = document.querySelectorAll(".box");
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].addEventListener('click', function(){
               if (boxes[i].classList.contains("opened")){
                    boxes[i].classList.remove("opened");
               } else {
                   boxes[i].classList.add("opened");
                   if (i == 0) {
                       boxes[i+1].classList.remove("opened");
                       boxes[i+2].classList.remove("opened");
                   } else if (i == 1) {
                       boxes[i+1].classList.remove("opened");
                       boxes[i-1].classList.remove("opened");
                   } else if (i == 2) {
                       boxes[i-1].classList.remove("opened");
                       boxes[i-2].classList.remove("opened");
                   }
               }
            });
        }
    </script>
  </body>
</html>