Авто Масштабируемый (Высота и Ширина) Анимированный Горизонтальный Аккордеон

Question

То, что я искал, оказалось довольно трудно найти после нескольких часов работы с различными версиями горизонтального аккордеона на JScript и CSS3...

В основном, мы платим и используем чертовски много элементов управления Telerik, и у меня для конкретной страницы у меня есть 3 RadGrids и RadHTMLBarChart, которые я хочу отображать на 4 отдельных панелях, если хотите..

Я бы хотел, чтобы они отображались в горизонтальном аккордеоне, но с учетом того факта, что контент в основном динамический, в том смысле, что высота может регулироваться в Radgrid, учитывая количество записей, которые он содержит, или ширина может регулировать график в зависимости от того, сколько столбцов нужно показать, версия с фиксированной шириной действительно не будет работать...

Итак, есть ли какая-нибудь подходящая версия горизонтального аккордеона, о которой кто-нибудь знает, которую я могу использовать в своих проектах для такого сценария?

Или JS или CSS3, я не против...

Заранее спасибо! Адам.

Answer 1

Горизонтальный аккордеон достижим при использовании CSS3, с одной оговоркой, вам нужно использовать прекомпилятор CSS, такой как LESS или SASS (здесь я использую LESS).

Требуется интересное использование неупорядоченного списка <ul>, <label> с и <input> Радио-кнопки.

@slideWidth: 3%;
@totalWidth: 100%;

.slider(@slides) {
    input[type="radio"]:checked ~ .accslide {
        width: @totalWidth * ((@totalWidth - (@slideWidth * @slides)) / 100);
    }
}

"Class" .slider(@slides), определенный выше, - это то, что вычисляет правильные размеры разделов слайдов по отношению к экрану (указано как ширина 100%), используя ширину каждого разделителя слайдов (указано как ширина 3%).

"Class".accslide - это фактическая "секция слайда", которая называется " General Sibling ".

Вот немного работающего МЕНЬШЕГО в codepen.

Чтобы справиться с анимацией аккордеона, каждый "accslide" использует другой LESS "класс" с именем.transitionArgs (@arguments), он называется "mixin", и это позволяет вам работать с кросс-совместимостью браузера.

.transitionArgs(@arguments) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

Если у вас есть вопросы, не стесняйтесь спросить.