html - Can't put a form in multiple divs

Question

I have an accordion menu on my page which spans across multiple divs, and I tried to put it in a form like below

(Note that the code within the divs is very long, so I removed it. It works perfectly fine without the form element.) If I put everything inside a form, nothing seems to display properly anymore, and if it helps, here is my CSS.

.accordion {
  background-color: whitesmoke;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  margin-left: 0;
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 0px;
  border-bottom: 2px solid #e8e8e8;
}

.active,
.accordion:hover {
  background-color: #ccc;
  box-shadow: none;
}

.panel {
  padding: 0 18px;
  background-color: #e8e8e8;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-family: Montserrat;
}

<form method="post">
  <button class="accordion"></button>
  <div class="panel">
    <input class="input name" type="text" name="name1" placeholder="name">
    <input class="input name" type="text" name="name2" placeholder="last name">
    <select class="drop">
      <option selected hidden>choose</option>
      <option></option>
      <option></option>
    </select>
    <select class="drop">
      <option selected hidden>choose</option>
      <option></option>
      <option></option>
    </select>
    <br>
    <input class="input" type="text" placeholder="date">
    <input class="input name" type="tel" pattern="0[0-9]{9}" placeholder="phone number">
    <div class="checkbox">
      <input type="checkbox" id="current">
      <label for="current">currently active</label>
    </div>
  </div>
  <button class="accordion"></button>
  <div class="panel">
    <input class="input" type="text" placeholder="birth code">
    <input class="input name" type="text" placeholder="county">
    <br>
    <input class="input name" type="text" placeholder="city">
    <input class="input" type="text" placeholder="address">
    <input class="input name" type="text" placeholder="birthplace">
  </div>
  <button class="accordion"></button>
  <div class="panel">
    <input class="input name" type="text" placeholder="bank name">
    <input class="input" type="text" placeholder="account code">
    <input class="input name" type="text" placeholder="account name">
  </div>
  <button class="accordion"></button>
  <div class="panel">
    <input class="input" type="text" placeholder="id code">
    <input class="input name" type="text" placeholder="id given on">
    <input class="input name" type="text" placeholder="id given by">
    <br>
    <input class="input name" type="text" placeholder="hire date">
    <input class="input" type="text" placeholder="contract number">
  </div>
  <button class="accordion"></button>
  <div class="panel">
    <p>Placeholder Text</p>
  </div>
  <input class="button" type="submit">
</form>

标签： htmlcss

Answer 1

<button> elements have a type attribute. The default (what you get if, as you do, omit it) is type="submit".

When a <button type="submit"> inside a <form> is clicked, the form gets submitted. This leads to a full page (re-)load, which destroys any Javascript state the page had before the click.

To fix your problem, use the correct button type, which for you is <button type="button">.