Collapse accordion horizontally on large screens and vertically on small screens

Question

On this Answer is a great solution for the horizontal collapse: Bootstrap 3.0 Collapse Horizontally

But the layout I am working on has that accordion slide under the div to the left of it for responsive view which then looks visually bad. Is it possible to have the accordion change orientation and slide downward in the SM and XS sizing.

I modified the code a little on this fiddle: http://jsfiddle.net/kylebellamy/q9GLR/176/

But the other issue I'm seeing is that the text is also rotated inside the accordion. I tried creating a second set of rules for a "p" tag but that doesn't seem to work.

Here's the required code:

HTML:

<div class="container">
    <div class="row">
        <div class="content">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                          Accordion 1
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS:

html, body {
    background-color:#e9eaed;
}
.content {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group {
    width:430px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading {
    width: 430px;
}
.panel-title {
    height:18px
}
.panel-title a {
    float:right;
    text-decoration:none;
    padding: 10px 430px;
    margin: -10px -430px;
}
.panel-body {
    height:830px;
}
.panel-group img {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
p {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(0deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(0deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(0deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(0deg);
    transform-origin: left top;
}
.panel-group .panel img {
    margin-left:400px;
    position: absolute;
}

Solved the second part of the rotated text but it is very much based on your layout and you need to edit a number of things in the CSS. Add a DIV around the text in the panel body and apply a class like I made called textRotate. Look in my fiddle for the new code: http://jsfiddle.net/kylebellamy/q9GLR/180/ — kylebellamy, Jun 02 '15 at 14:57
Sorry, it was in reference to this portion: "But the other issue I'm seeing is that the text is also rotated inside the accordion. I tried creating a second set of rules for a "p" tag but that doesn't seem to work." I solved it (possibly less simply than might be but it works) using the modified code in the fiddle. — kylebellamy, Jun 02 '15 at 15:56

score 3 · Accepted Answer · 2015-06-02T14:50:49.320

3

Use a css @media query to disable the transform if the screen is smaller than a certain pixel width (768px is bootstrap's collapse point).

(Demo)

@media (max-width: 768px) {
    .panel-group {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
}

edited Jun 02 '15 at 14:50

answered Jun 02 '15 at 14:45

That's it! And you just helped me understand the @media usage a great deal more, thank you. – kylebellamy Jun 02 '15 at 15:01
Quick follow up question (I hope): At this fiddle: http://jsfiddle.net/kylebellamy/8cn6f5o6/1/ I put a div next to the accordion, tried columns, pulls and the accordion will not go to the right of the image div. Any thoughts? – kylebellamy Jun 02 '15 at 18:05
Ah! That's what I was missing! One column with the float. Thank you again! – kylebellamy Jun 02 '15 at 18:37

Collapse accordion horizontally on large screens and vertically on small screens

1 Answers1

Linked