0
8 (800) 300-50-20
Время работы: 09:00-18:00 Пн.-Вт.
  • 0
  • 0
  • 0

Аккордеон для страницы

Пример работы аккардеона для статических страниц:



  • Клиент требует доставить срочно?
    Мы доставляем за 2-3 часа по Москве и Подмосковью. Или когда будет удобно.
  • Заболел свой курьер?
    Все курьеры уже заняты и некому доставить новый заказ? В Достависте Вы всегда сможете заказать курьера на замену. В течение 1-2 часов он будет у Вас. В любое время суток. Без бюрократии и выматывающих звонков диспетчеру. Просто заполните форму заказа курьерской службы!


HTML код для вставки на страницу в режиме HTML вставки. Обратите внимание, если необходимо скрыть все вкладки, добавьте для первой вкладке input строчку checked

    <ul class="accordion">
    <li>
        <input type="checkbox">
        <div class="accordion__header">Клиент требует доставить срочно?</div>
        <div class="accordion__inner">Мы доставляем за 2-3 часа по Москве и Подмосковью. Или когда будет удобно.</div>
    </li>
    <li>
        <input type="checkbox" checked>
        <div class="accordion__header">Заболел свой курьер?</div>
        <div class="accordion__inner">Все курьеры уже заняты и некому доставить новый заказ?
            В Достависте Вы всегда сможете заказать курьера на замену. В течение 1-2 часов он будет у Вас. В любое время суток. Без бюрократии и выматывающих звонков диспетчеру. Просто заполните форму заказа курьерской службы! </div>
    </li>
</ul>


CSS код для вставки в user.html

.accordion {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.accordion__header {
		position: relative;
		padding: 15px 0;
		color: #1f1f1f;
		font-weight: 600;
		font-size: 20px;
		margin-bottom: 1px;
	}
	.accordion__header:after {
		content: "-";
		position: absolute;
		top: 13px;
		right: 10px;
	}
	.accordion__inner {
		padding-bottom: 15px;
	}
	.accordion li {
		position: relative;
		border-bottom: 1px solid #e6e6e6;
	}
	.accordion li input[type=checkbox] {
		position: absolute;
		cursor: pointer;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0;
	}

	.accordion li input[type=checkbox]:checked ~ .accordion__inner {
		margin-top: 0;
		max-height: 0;
		opacity: 0;
		padding-bottom: 0;

	}
	.accordion li input[type=checkbox]:checked ~ .accordion__header:after {
		content: "+";
	}