Создание простого раздвижного компонента-гармошки с помощью HTML, CSS и JavaScript

Термин «простой скользящий аккордеон», похоже, не является широко используемой фразой или конкретной концепцией программирования на английском языке. Однако, исходя из этого термина, похоже, что он относится к компоненту пользовательского интерфейса, который сочетает в себе функции простого аккордеона и скользящей анимации. Я приведу вам пример того, как можно создать простой скользящий компонент-аккордеон с помощью HTML, CSS и JavaScript.

HTML:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Section 1</div>
    <div class="accordion-content">
      <p>This is the content of section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 2</div>
    <div class="accordion-content">
      <p>This is the content of section 2.</p>
    </div>
  </div>
</div>

CSS:

.accordion {
  width: 100%;
}
.accordion-item {
  border-bottom: 1px solid #ccc;
}
.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}
.accordion-content {
  padding: 10px;
  display: none;
}
.accordion-content.show {
  display: block;
}

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  const accordionItems = document.querySelectorAll('.accordion-item');
  accordionItems.forEach(function(item) {
    const header = item.querySelector('.accordion-header');
    const content = item.querySelector('.accordion-content');
    header.addEventListener('click', function() {
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  });
});

В этом примере у нас есть контейнер-аккордеон (divс классом «аккордеон»), состоящий из нескольких элементов-аккордеона. Каждый элемент имеет заголовок (divс классом «accordion-header») и содержимое (divс классом «accordion-content»). Изначально содержимое скрыто (в CSS для отображения установлено значение «нет»). Когда пользователь нажимает на заголовок аккордеона, соответствующий контент перемещается вниз или вверх, переключая его видимость.