0

Есть меню аккордеон, и нужно, чтобы при клике одной ячейки открывались соседние, то есть при клике на Пациента, должны отобразиться и другие ячейки про состояние здоровья и дата посещения

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  height: 0;
  transition: 0.4s;
}

.accordion.active+.panel {
  height: 50px;
}
<table>
  <tr>
    <th>Имя</th>
    <th>Состояние</th>
    <th>Дата</th>
  </tr>
  <tr>
    <td>
      <button class="accordion">Пациент №1</button>
      <div class="panel">
        <p>Петр</p>
      </div>
    </td>
    <td>
      <button class="accordion">Состояние здоровья</button>
      <div class="panel">
        <p>Здоровый</p>
      </div>
    </td>
    <td>
      <button class="accordion">Дата посещения</button>
      <div class="panel">
        <p>10.02.2023, 0:28</p>
      </div>
    </td>
  </tr>
</table>

введите сюда описание изображения

1 ответ 1

0

нужно, чтобы при клике одной ячейки открывались соседние, то есть при клике на Пациента, должны отобразиться и другие ячейки про состояние здоровья и дата посещения

Посмотри, правильно ли я понял что ты имел ввиду. Теперь при клике на любую кнопку класса accordion открываются все ячейки этой строки.

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.closest('tr').querySelectorAll('.accordion').forEach(function(o){
      o.classList.toggle("active");
      var panel = o.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    })
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  height: 0;
  transition: 0.4s;
}

.accordion.active+.panel {
  height: 50px;
}
<table>
  <tr>
    <th>Имя</th>
    <th>Состояние</th>
    <th>Дата</th>
  </tr>
  <tr>
    <td>
      <button class="accordion">Пациент №1</button>
      <div class="panel">
        <p>Петр</p>
      </div>
    </td>
    <td>
      <button class="accordion">Состояние здоровья</button>
      <div class="panel">
        <p>Здоровый</p>
      </div>
    </td>
    <td>
      <button class="accordion">Дата посещения</button>
      <div class="panel">
        <p>10.02.2023, 0:28</p>
      </div>
    </td>
  </tr>
</table>

2
  • что нужно добавить чтобы, если под пунктом нужно будет добавить еще пункт, то есть вместо Петра будет Пациент №1.1?
    – Костя
    10 фев в 13:23
  • @Костя, ты можешь отредактировать свой вопрос и добавить новый html. Так будет понятнее что имелось ввиду. Или вообще создать новый вопрос с другим контентом.
    – ksa
    10 фев в 14:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.