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

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代替。

最佳答案

尝试为您的手风琴添加一些脚本：

$(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。

关于javascript - 如何修改我的垂直可折叠内容面板？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46510411/