我有一个UL元素，在我的网页右边，每个列表元素里面都有按钮，当一个按钮被点击时，相关的文本会被展开，使用一个可折叠的类。
我怎样才能防止两个列表被打开，如图所示？所以，如果按下另一个按钮，所有其他的立即隐藏。
下面是我的HTML代码：

<div class="container-fluid">
    <div class="sec2">
      <h1>A 44-letter alphabet.</h1>
      <h1>A phonetically consistent language.</h1>
      <h1>A determined teacher you can count on.</h1>
    </div>
    <div class="sec3">
      <ul class="sec2drop" id="makeshorter">
        <li>
          <button onclick="myFunction()" class="collapsible">
            Prepare for a language exam
            <i class="fa fa-caret-right" id="arrow0"></i>
          </button>
          <div class="content">
            <p>
              A hundred different reasons, one perfect outcome. Maybe you
              were born to Hungarian parents abroad, and decided to take a
              Hungarian language exam to replace one of your high school
              leaving exams.
            </p>
            <p>
              Maybe you're going to be an exchange student in Hungary or
              work there for some time. I'm happy to prepare you in video
              call sessions, both with verbal and written training.
            </p>
          </div>
        </li>
        <li>
          <button onclick="myFunction()" class="collapsible">
            Hungarian for kids
            <i class="fa fa-caret-right" id="arrow1"></i>
          </button>
          <div class="content">
            <p>
              Many Hungarians living abroad would like to teach their
              linguistics or national heritage. I will tailor online
              sessions for your child that suites their and your needs the
              best.
            </p>
            <p>
              You decide if you would like to supervise or participate in
              the lesson. Generally, children under 8 require parental or
              older sibling presence.
            </p>
          </div>
        </li>
        <li>
          <button onclick="myFunction()" class="collapsible">
            Take on a challenge
            <i class="fa fa-caret-right" id="arrow2"></i>
          </button>
          <div class="content">
            <p>
              Whether you spontaneously decided to learn one of the hardest
              languages in the world, or you want to reconnect with your
              Hungarian heritage, I will guide you along the way. Are you a
              newbie or an advanced learner? Would you like specific types
              of homework in between lessons? I will adapt to your needs.
            </p>
          </div>
        </li>
        <li>
          <button onclick="myFunction()" class="collapsible">
            Translation services
            <i class="fa fa-caret-right" id="arrow3"></i>
          </button>
          <div class="content">
            <p>
              English to Hungarian or Hungarian to English. You can book my
              written translation services and choose the package most
              suitable to you.
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>

下面是我的CSS：

.container-fluid {
  display: flex;
  align-items: center;
  /* justify-content: space-between;
  height: 30vw; */
  background-image: url(pictures/output-onlinepngtools.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px solid rgb(68, 115, 216);
  /* width: 100%; */
}

.container-fluid h1 {
  padding-left: 20px;
  line-height: calc(30vw / 3);
  font-size: 40px;
}

.sec2 {
  width: 65%;
}

.sec2drop li {
  list-style: none;
  border-top: 1px solid rgb(161, 159, 159);
  width: 60%;
  margin-left: 100px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  cursor: pointer;
  padding: 18px;
  margin-left: 10px;
  border: none;
  font-size: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0px 18px;
  display: none;
  overflow: hidden;
  background-color: wheat;
}

/* reduces the width of the content once expanded inside the collapsible */
.sec3 {
  width: 40%;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  font-size: 13px;
}

下面是我的JavaScript：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

function myFunction() {
  for (y = 0; y < 4; y++) {
    var x = document.getElementById(`arrow${y}`);
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
}