я на основе моего кода в следующих вопросах, но не смог достичь ожидаемого результата, я хотел в моей модифицированной версии:Bootstrap аккордеон рушится горизонтально
Collapse accordion horizontally on large screens and vertically on small screens
http://jsfiddle.net/kylebellamy/q9GLR/180/
https://stackoverflow.com/a/12592438/3499881
Как вы увидите в моем коде, я хочу, чтобы панель аккордеона открывалась/закрывалась горизонтально, а другая всегда открывалась. Я почти получил его, но у меня все еще есть проблемы с текстом второй (открытой) панели: он должен использовать всю оставшуюся часть ширины страницы, но это не так, и текст выходит за пределы области панели внизу.
Вы не знаете, что я должен делать?
Пожалуйста, смотрите мой код здесь:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-content">
<ul>
<li>Link#1</li>
<li>Link#2</li>
<li>Link#3</li>
<li>Link#4</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-content">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
и здесь CSS:
.panel-group {
width: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: 100%;
}
.panel-body {
height:200px;
}
.panel-group .panel-content {
-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;
}
.panel-group .panel .panel-content {
margin-left:520px;
position: absolute;
}
Здесь же в скрипкой: https://jsfiddle.net/dbahiense/p4bkt6ed/
это совсем то, что я хочу, спасибо. Но как я мог сделать первую панель меньшей, когда она открыта (скажем, только с 200px), а вторая с остальной шириной тела? –
Да, вы можете контролировать ширину его .panel-body {height: 200px; } –