javascript - HTML onclick event doesn't work with parameter

Question

When I click my button, which should make things visible and invisible, the whole website disappears.

What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit. So it would look like the Information box lists more information’s, when the user wants to read them.

But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3 ...

function open(x) {
  var more_info = document.getElementById("project_info_" + x);
  if (more_info.style.display == "none") {
    more_info.style.display = "unset";
  } else {
    more_info.style.display = "none";
  }
}

.project-box {
  padding: 2vh;
  margin-bottom: 3vh;
  box-shadow: 0px 5px 7px rgb(136, 136, 136);
}

.project-button {
  width: 20vw;
  height: 3vh;
  background-color: #d6d6d6;
  border: none;
}

.project-button:hover {
  background-color: #B50000;
  color: white;
}

.project-button:focus,
.project-button:active,
.project-button:visited {
  border: none;
  border-radius: 0;
}

.project-closed {
  display: none;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
}

<div class="project-box" id="project_1">
  <h3>Project 1</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_1">
    <p>Informations</p>
  </div>
  <button class="project-button" onclick="open(1)">More details</button>
</div>

Answer 1

Your problem is using open - although not a reserved word - in the onclick which performs a document.open (I would have guessed window.open) and that will wipe the page in any case

Rename the function but I strongly recommend you remove the inline event handler and use an eventListener

I added the IDs of the divs to show as data attribute to the buttons you click

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("project-button")) {
    const more_info = document.getElementById(tgt.dataset.id);
    more_info.classList.toggle("project-closed");
  }
})

.project-box {
  padding: 2vh;
  margin-bottom: 3vh;
  box-shadow: 0px 5px 7px rgb(136, 136, 136);
}

.project-button {
  width: 20vw;
  height: 3vh;
  background-color: #d6d6d6;
  border: none;
}

.project-button:hover {
  background-color: #B50000;
  color: white;
}

.project-button:focus,
.project-button:active,
.project-button:visited {
  border: none;
  border-radius: 0;
}

.project-closed {
  display: none;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
}

<div class="project-box" id="project_1">
  <h3>Project 1</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_1">
    <p>Informations</p>
  </div>
  <button type="button" class="project-button" data-id="project_info_1">More details</button>
</div>

<div class="project-box" id="project_2">
  <h3>Project 2</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_2">
    <p>Informations</p>
  </div>
  <button type="button" class="project-button" data-id="project_info_2">More details</button>
</div>