I need just one menu open with this UI

Question

I designed this UI and I just want the same functionality to be implemented on this UI design. I just need one and ONLY ONE menu open at a time instead of all of them.

When you click on a button it OPENS OR CLOSES the current accordion. Also, if any other were open, it AUTOMATICALLY CLOSES when you try to open another.

Please use the same transitioning.

var accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
  accordians[i].onclick = function() {
    this.classList.toggle('arrowClass');
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // Accordion is open, needs to be closed
      content.style.maxHeight = null;
    } else {
      // Accordion is closed, needs to be open
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

body {
  display: grid;
  place-items: center;
}

.accordion_container {
  background-color: #efefef;
  padding: 10px;
  width: 500px;
  /*height: 400px;*/
  overflow: auto;
  border-radius: 3px;
  /* padding: 10px; */
  position: relative;
}

.accordion_container .accordion_body {
  /*padding: 20px 0 30px;*/
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn {
  width: 100%;
  background-color: gainsboro;
  border: none;
  outline: none;
  text-align: left;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 300ms linear;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn:not(:last-child) {
  margin-bottom: 3px;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
  background-color: silver;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(19, 2, 153, 1);
  color: rgba(19, 2, 153, 1);
  border-right-width: 3px;
  border-right-color: rgba(19, 2, 153, 1);
  border-right-style: solid;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
  content: '▼';
  float: right;
}

.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
  content: '▲';
}

.accordion_container .accordion_body .accordion_body_item .accordion_content {
  /* padding: 0 20px; */
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: gainsboro;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: gainsboro;
  /* border-bottom-width: 1px; */
  /* border-bottom-style: solid; */
  /* border-bottom-color: gainsboro; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 450ms ease-in-out;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner {
  padding: 20px 15px;
  font-size: 14px;
  background-color: #777;
  color: #dfdfdf;
  /*height: 200px;*/
  overflow: auto;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_datetime {
  text-align: right;
}

.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_body {
  margin-top: 20px;
  text-align: justify;
}

<div class="accordion_container">
  <div class="accordion_body">
    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae impedit pariatur aliquid minus!
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
            cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

This should do what your asking but you could probably reduce the amount of html and css down a little and using more newer JS ES6 syntax will make your life a little easier.

I've added some comments where I made changes

  // Use QuerySelector to get all toggle buttons
  const accordians = document.querySelectorAll(".accordion_btn");

  // Loop elements and add onclick handler
  accordians.forEach((element) => {
    element.onclick = (event) => {
      // get trigger elementa and body
      const toggleButton = event.target;
      const accordianBody = toggleButton.nextElementSibling;

      // Get a list of open accordians
      const openAccordians = document.querySelectorAll(
        ".accordion_content.open"
      );
      // Get a list of open accordians
      const toggleButtons = document.querySelectorAll(
        ".accordion_btn.arrowClass"
      );

      // Check if clicked accordian is already open
      if (accordianBody.classList.contains("open")) {
        accordianBody.classList.remove("open");
        toggleButton.classList.remove("arrowClass");
        return;
      }

      // Close
      openAccordians.forEach((item) => item.classList.remove("open"));
      toggleButtons.forEach((item) => item.classList.remove("arrowClass"));

      // Open clicked one.
      accordianBody.classList.add("open");
      toggleButton.classList.add("arrowClass");
    };
  });

  body {
    display: grid;
    place-items: center;
  }

  .accordion_container {
    background-color: #efefef;
    padding: 10px;
    width: 500px;
    /*height: 400px;*/
    overflow: auto;
    border-radius: 3px;
    /* padding: 10px; */
    position: relative;
  }

  .accordion_container .accordion_body {
    /*padding: 20px 0 30px;*/
  }

  .accordion_container .accordion_body .accordion_body_item .accordion_btn {
    width: 100%;
    background-color: gainsboro;
    border: none;
    outline: none;
    text-align: left;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 300ms linear;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn:not(:last-child) {
    margin-bottom: 3px;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn:hover {
    background-color: silver;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: rgba(19, 2, 153, 1);
    color: rgba(19, 2, 153, 1);
    border-right-width: 3px;
    border-right-color: rgba(19, 2, 153, 1);
    border-right-style: solid;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn::before {
    content: "▼";
    float: right;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_btn.arrowClass::before {
    content: "▲";
  }

  .accordion_container .accordion_body .accordion_body_item .accordion_content {
    /* padding: 0 20px; */
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: gainsboro;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: gainsboro;
    /* border-bottom-width: 1px; */
    /* border-bottom-style: solid; */
    /* border-bottom-color: gainsboro; */
    overflow: hidden;
    transition: max-height 450ms ease-in-out;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner {
    padding: 20px 15px;
    font-size: 14px;
    background-color: #777;
    color: #dfdfdf;
    /*height: 200px;*/
    overflow: auto;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner
    .inner_datetime {
    text-align: right;
  }

  .accordion_container
    .accordion_body
    .accordion_body_item
    .accordion_content
    .inner
    .inner_body {
    margin-top: 20px;
    text-align: justify;
  }

  /* Add open body state with css */
  .accordion_content.open {
    max-height: 500px;
  }

  /* Accordian Closed state */
  .accordion_content {
    max-height: 0;
    transition: 0.3s;
  }

<div class="accordion_container">
  <div class="accordion_body">
    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae
            impedit pariatur aliquid minus!
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>

    <div class="accordion_body_item">
      <button class="accordion_btn">Accordion one</button>
      <div class="accordion_content">
        <div class="inner">
          <div class="inner_datetime">dd/mm/yyyy</div>
          <div class="inner_body">
            These cookies allow us or our third party analytics providers to
            collect information and statistics on use of our services by you and
            other visitors. These information help us improve our services and
            products for the benefit of you and others. These cookies allow us
            or our third party analytics providers to collect information and
            statistics on use of our services by you and other visitors. These
            information help us improve our services and products for the
            benefit of you and others.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Update: Correct comment format in css.