Auto Scalable (высота и ширина) Animated Горизонтальные Аккордеон

Question

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

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

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

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

Либо JS или CSS3 я не против ...

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

Answer 1

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

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

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

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

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

«класс» .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; 
} 

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