CSS FAQ или виджет Accordion для сайта Weebly »WebNots

Виджет «Аккордеон» позволяет добавлять большой контент в ограниченное пространство, а заинтересованные пользователи могут расширять заголовок для просмотра соответствующего контента. В нашей предыдущей статье мы обсудили, как использовать бесплатное приложение аккордеона, предлагаемое Weebly из Центра приложений, а также некоторые параметры настройки. В этой статье давайте обсудим виджет аккордеона CSS для сайта Weebly.

Как добавить CSS FAQ или виджет Accordion в Weebly?

Хотя аккордеоны популярны с использованием виджета пользовательского интерфейса jQuery, также можно сделать аккордеон с помощью CSS без скрипта. Это помогает странице загружаться быстрее и упрощает настройку с помощью CSS. Виджет содержит три элемента для каждого блока аккордеона — заголовок, стрелку и текстовое содержимое. Все элементы управляются с помощью простого CSS и могут быть настроены в соответствии с вашими потребностями. В основном список с типом ввода, так как флажок используется для управления поведением аккордеона.

Аккордеон CSS будет выглядеть примерно так, как показано ниже, и вы можете просмотреть живую демонстрацию здесь.

CSS для виджета Accordion

Скопируйте приведенный ниже код CSS и вставьте его в раздел «Код заголовка» в разделе «Страницы> Выберите страницу> Настройки SEO» страницы вашего сайта Weebly. Чтобы облегчить понимание, мы выделили заголовок и стиль текста комментариями. Например, светло-зеленый используется в качестве цвета фона заголовка с размером шрифта 20 пикселей и толщиной 500, который можно настроить в соответствии с темой и макетом вашего сайта. Точно так же светло-серый цвет используется для цвета фона корпуса аккордеона с размером шрифта 16 пикселей, который также можно настроить в соответствии с вашими потребностями.

<style>
/* Heading Style Start */ 
.accordion-heading {
background-color: lightgreen;
display: block;
padding: 10px;
position: relative;
cursor: pointer;
font-size: 20px;
font-weight: 500;
}
/* Heading Style End */ 

/* Body Style Start */
.accordion-body {
max-height: 0;
margin-bottom: 2px;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
text-align: justify;
background-color: lightgrey;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
/* Body Style End */

.accordion {
border: 1px solid white;
margin: 0 auto;
list-style: none;
overflow: hidden;
}

.accordion > * + * {
border-top: 1px solid white;
}

.accordion-input:checked ~ .accordion-body {
background-color: lightgrey;
padding: 10px;
max-height: 1000px;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.accordion-input:checked ~ .accordion-heading > .accordion-heading-btn {
transform: rotate(0);
}

.accordion-heading-btn {
display: block;
width: 30px;
position: absolute;
top: 10px;
right: 0;
pointer-events: none;
transition: transform .3s ease;
transform: rotate(-180deg);
text-align: center;
font-size: 14px;
line-height: 1;
}

.accordion-input { 
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}
</style>