title: How to modify my vertically collapsible content panel?
body: <p>The original version of <code>Accordion</code> supports horizontal collapsible content panels: <a href="https://www.w3schools.com/howto/howto_js_accordion.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_accordion.asp</a>.</p>
  
  <p>I created a jsfiddle for <strong>vertically</strong> collapsible content panels:</p>
  
  <p><a href="http://jsfiddle.net/q9GLR/478/" rel="nofollow noreferrer">http://jsfiddle.net/q9GLR/478/</a></p>
  
  <p>This is what I was able to do.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="content"&gt;
        &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
                  Accordion 1
                &lt;/a&gt;
              &lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                &lt;p&gt;
                  &lt;h1&gt;Title1&lt;/h1&gt;
                  &lt;br&gt;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?
                  &lt;br&gt;- Some Source
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
                  Accordion 2
                &lt;/a&gt;
              &lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                &lt;p&gt;
                  &lt;h1&gt;Title2&lt;/h1&gt;
                  &lt;br&gt;
                    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?
                  &lt;br&gt;- Some Source
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I don't know how to achieve the following behavior: the content panel <code>Accordion1</code> should be opened when a page is loaded. It should occupy all screen. But when a user clicks on <code>Accordion2</code>, then each content panel occupies 50%. How can I do it? I was thinking that maybe for such behaviour <code>Accordion1</code> can be actually substituted by a fixed <code>div</code>.</p>