Auto Scalable (Height and Width) Animated Horizontal Accordion

Question

What I'm looking for is proving rather difficult to find after spending hours going through various JScript and CSS3 versions of a Horizontal Accordion...

Basically, we pay for and use a hell of a lot of the Telerik controls and I for a particular page I have 3 RadGrids and a RadHTMLBarChart that I wish to display in 4 seperate panels if you like..

The way I would really like to display these would be in a Horizontal Accordion but given the fact that the content is mostly dynamic in the sense that the height may adjust of the radgrid given the number of records it holds or the width may adjust of the chart depending on how many columns it is to show a fixed width version is really not going to work...

So, is there any suitable version of a horizontal accordion out there that somebody knows about that I can use in my projects for this sort of scenario?

Either JS or CSS3 I don't mind...

Thanks in Advance! Adam.

Answer 1

A Horizontal Accordion is achievable using CSS3, one caveat, you'd need to use a CSS Precompiler such as LESS or SASS (I use LESS here).

It requires an interesting use of an unordered list <ul>, <label>s and <input> radio buttons.

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

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

The "class" .slider(@slides) defined above is what calculates the correct dimensions of the slide sections in relation to the screen (stated as 100% width) using the width of each slide divider (stated as 3% width).

The "class" .accslide is the actual "slide section" which is accessed as a "General Sibling".

Here's some working LESS in codepen.

To deal with the animation of the accordion each "accslide" uses another LESS "class" called .transitionArgs(@arguments), it's called a "mixin" and this allows you to handle browser cross compatibility.

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

If you have any questions, feel free to ask.