当我单击 Javascript 中另一个按钮的内容时，如何关闭一个按钮内容

Question

My problem is that I have a website, using javascript I have made it when I click on the About Me it opens, but when I click on Education and Achievements the About me button's content remains open and the Education stuff overlaps it. I want to make it so that when I click on another button the first one closes (its content. The website name is dirieahmed.ml

My code HTML and JS will be linked below ill add CSS later if need be.

<div class="container">
  <button id="one" class="click one">About Me</button>
  <div class="list-1 sec">
    <h1 class="content-header-one content">Dummy text header</h1>
    <p class="content-paragraph-one">Dummy text</p>
  </div>
  <button class="click two">Education and Achivements</button>
  <div class="list-2 sec">
    <p class="content-paragraph2 content">Dummy text</p>
    <ul class="content-list content">
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button class="click three" >Other</button>
  <div class="list-3 sec">
    <h1 class="content-header-two content">Dummy text header</h1>
    <p class="content-paragraph3 content">Dummy text</p>
  </div>
  <script async>
    let one = document.querySelector('.one');
    let two = document.querySelector('.two');
    let three = document.querySelector('.three');
    let list1 = document.querySelector('.list-1');
    let list2 = document.querySelector('.list-2');
    let list3 = document.querySelector('.list-3');
      one.addEventListener("click", ()=>{
        list1.classList.toggle('newlist');  
    });
    two.addEventListener("click", ()=>{
        list2.classList.toggle('newlist');
        lis
    })
    three.addEventListener("click", ()=>{
        list3.classList.toggle('newlist')
    });
 
    // you gotta chnage this
// change above
  </script>
</div> 

Answer 1

The document object should be given a click event listener. Use the contains() function to determine with each click if the clicked element is outside the targeted element. Hide the original element if the clicked element is outside.

Answer 2

To summarize you will need to hide all other ones when there is a click anywhere and then only show the ones based on the link that you clicked

Check the code below

https://codesandbox.io/s/keen-driscoll-igzlwb?file=/index.html:2333-3356

     <script async>
        // Instanciate List div's
        let list1 = document.querySelector(".list-1");
        let list2 = document.querySelector(".list-2");
        let list3 = document.querySelector(".list-3");

        // Reset's all views to the default without .newlist
        const resetAllViews = () => {
          list1.classList.remove("newlist");
          list2.classList.remove("newlist");
          list3.classList.remove("newlist");
        };

        // Checks to see what button is clicked and shows correct list based on input
      document.addEventListener(
        "click",
        function (e) {
          e = e || window.event;
          var target = e.target;
          if (target.classList.contains("one")) {
            resetAllViews();
            list1.classList.add("newlist");
          }
          if (target.classList.contains("two")) {
            resetAllViews();
            list2.classList.add("newlist");
          }
          if (target.classList.contains("three")) {
            resetAllViews();
            list3.classList.add("newlist");
          }
        }, false);

      </script>