javascript - 如何修改我的垂直可折叠内容面板？

Question

Accordion 的原始版本支持水平可折叠内容面板:https://www.w3schools.com/howto/howto_js_accordion.asp .

我为垂直可折叠内容面板创建了一个 jsfiddle:

http://jsfiddle.net/q9GLR/478/

这就是我能够做到的。

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;
}
.panel-group p {
  -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 img {
  margin-left:400px;
  position: absolute;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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>Title1</h1>
                <br>11A 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 class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Accordion 2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <p>
                <h1>Title2</h1>
                <br>
                  22A 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>

但我不知道如何实现以下行为:加载页面时应打开内容面板 Accordion1。它应该占据所有屏幕。但是当用户点击 Accordion2 时，每个内容面板都会占据 50%。我该怎么做？我在想，也许对于这样的行为 Accordion1 实际上可以用固定的 div 代替。

Answer 1

尝试为 Accordion 添加一些脚本:

$(document).on('ready', function() {
    $('#collapseOne').collapse('toggle');
    $('#accordion .panel-heading').on('click', function(e) {
        $('body').addClass('accordion-clicked');
    });
});

比一些样式来支持它:

#accordion .panel .panel-body {
    height: 40vw;
    width: 100vh;
}
#accordion .panel:nth-child(1) .panel-body {
    height: 80vw;
}
.accordion-clicked #accordion .panel:nth-child(1) .panel-body {
    height: 40vw;
}

您可以调整值。正在处理 JSFiddle .