Наполняя свой сайт контентом мы всегда стараемся оформлять контент более удобным для чтения. Особенно часто это относится в такому виду содержимого как "Вопрос-Ответ", т.е есть некий вопрос, а на него есть ответ. В классическом представлении (как раньше) это просто длинная текстовая информация на одной странице.
С развитием индустрии сайтостроения (создания и дизайн сайтов) в нашу жизнь вошли такие сайты как одностраничники, landing page, посадочные страницы и все перечисленные типы сайтов требуют компактного оформления контента. Представьте, если бы на главной странице сайта мы отобразили список вопросов-ответов в виде простого текста. Все это было бы неудобно и выглядело бы не очень красиво.
Как же нам оформить данный контент? Давайте сгруппируем его в раскрывающие секции, т.е при нажатии на одну секцию, предыдущая закрывается, а текущая открывается. И вот для такого поведения для этого придумано даже название "Аккордион", т.е раскрытие контента в виде движения частей музыкального инструмента Аккордин.
В конструкторе сайта для такого вида контента есть виджет "Аккордион", который и служит для раскрытия контента в виде аккордиона.
На рисунке выше представлен стандартный вид виджета "Аккордион". У виджета всегда открыт первый элемент. В настройках можно выбрать html тег для заголовка и иконки открытого или закрытого состояния. Для стилевого оформления доступны на вклдки стили доступны все свойства для текста и границ. Рассмотрим подробнее ниже.
Содержимое
- Аккордеон
- Элементы аккордеона - стандартный элемент настроек в котором можно изменить текст для заголовка и описания.
- HTML-тег заголовка - изменения html тега для заголовка элемента виджета
- Иконка - установка иконки для состояния по умолчанию, т.е для свернутого (закрытого) состояния элемента.
- Иконка активного - выбор иконки для активного состояния, т.е при открытом виде элемента аккордиона.
Стиль
- Аккордеон
в данной группе стилей возможно изменить стили для границ виджета, а именно ее толщину и цвет.
- Заголовок
Цвет, фон, цвет активного заголовка, ее типографику и отступы. Все это возможно изменить для заголовка элемента виджета.
- Иконка
Выравнивание иконки и ее цвет доступны в данной группе свойств. Так же доступно к изменению отступ текста от иконки, а так же цвет активного состояния иконки, т.е когда открыт аккордион.
- Содержимое
У содержимого меняются все стандартные свойства для текста, такие как цвет, типографика, а также фон для всего содержимого и его внутренние отступы.