How do i make one button content close when i click another button's content in Javascript-CodePudding

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 >
  <button id="one" >About Me</button>
  <div >
    <h1 >Dummy text header</h1>
    <p >Dummy text</p>
  </div>
  <button >Education and Achivements</button>
  <div >
    <p >Dummy text</p>
    <ul >
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button  >Other</button>
  <div >
    <h1 >Dummy text header</h1>
    <p >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>

CodePudding user response：

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.

CodePudding user response：

You would have to add a listener to the entire document to see what button is clicked with something like the code below

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
      text = target.textContent || target.innerText;   
}, false);

Then close all other non target elements and open the one that is clicked!