Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Контейнер списка */
.collapsible-container {
margin: 10px 0;
}
/* Стиль кнопки-заголовка */
.collapsible-header {
cursor: pointer;
padding: 8px 15px;
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-radius: 4px;
display: inline-block;
user-select: none;
}
/* Иконка стрелки */
.collapsible-arrow::after {
content: '▼';
margin-left: 8px;
font-size: 0.9em;
}
/* Состояние развернуто */
.collapsible-header.expanded .collapsible-arrow::after {
content: '▲';
}
/* Содержимое списка (скрыто по умолчанию) */
.collapsible-content {
display: none;
margin-top: 5px;
padding-left: 20px;
}
/* Элементы списка */
.collapsible-item {
margin: 5px 0;
display: flex;
align-items: center;
}
/* Изображения в списке */
.collapsible-item img {
margin-right: 8px;
}