Невозможно разместить форму в нескольких div

Question

У меня есть меню аккордеона на моей странице, которое охватывает несколько div, и я попытался поместить его в форму, как показано ниже

(Обратите внимание, что код внутри div очень длинный, поэтому я удалил его . Он отлично работает без элемента формы.) Если я помещаю все в форму, кажется, что ничего больше не отображается должным образом, и если это помогает, вот мой 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>

Answer 1

Элементы

<button> имеют атрибут type. По умолчанию (то, что вы получите, если вы это сделаете, опустите его): type="submit".

При нажатии <button type="submit"> внутри <form> форма получает отправлено . Это приводит к полной (повторной) загрузке страницы, которая уничтожает любое Javascript состояние, которое страница имела до щелчка.

Чтобы решить вашу проблему, используйте правильный тип кнопки, который для вас <button type="button"> .