Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Как сделать аккордеон на CSS

Для создания аккордеона на CSS можно использовать свойство «display: none» для скрытия контента, который будет раскрываться при клике на заголовок. При этом, при помощи псевдокласса «:checked» можно изменять свойство «display» на «block» для соответствующего контента.

Пример кода:

HTML:

<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
  <label for="accordion-1">Заголовок 1</label>
  <div class="accordion-content">
    Контент 1
  </div>

 input type="checkbox" id="accordion-2" name="accordion-checkbox" hidden>
  <label for="accordion-2">Заголовок 2</label>
  <div class="accordion-content">
    Контент 2
  </div>

  <input type="checkbox" id="accordion-3" name="accordion-checkbox" hidden>
  <label for="accordion-3">Заголовок 3</label>
  <div class="accordion-content">
    Контент 3
  </div>
</div>

CSS:

.accordion label {
  display: block;
  cursor: pointer;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.accordion input[type="checkbox"]:checked + label + .accordion-content {
  display: block;
}

В данном примере при клике на заголовок аккордеона происходит раскрытие соответствующего контента. Каждый заголовок и контент обернуты в свои соответствующие теги, а также имеют уникальные идентификаторы для связи между собой.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.