title: Twitter Bootstrap collapse panel sideways
body: <p>So for those who are better with css hopefully they can help me, or steer me in a different direction. I'm trying to flip a bootstrap panel sideways with an accordion collapse. I've gotten this far. But I'm having issues with panel body content.</p>
  
  <p>The real issue is flipping the content back 90 
  I'm not sure of a better way to do it</p>
  
  <p>From the picture below you can see the problem </p>
  
  <p><img src="https://i.stack.imgur.com/CGUkh.png" alt="enter image description here"></p>
  
  <p>My jsfiddle <a href="http://jsfiddle.net/cr1t/aegrguu1/1/" rel="nofollow noreferrer">http://jsfiddle.net/cr1t/aegrguu1/1/</a></p>
  
  <pre><code>.panel-group
  {
      width: 380px;
      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: 100%;
  }
  
  .panel-title
  {
      height: 18px;
  }
  
   .panel-title a
      {
          float: right;
          text-decoration: none;
          padding: 10px 310px;
          margin: -10px -310px;
      }
  
  .panel-body
  {
      height: 310px;
  }
  
  .panel-group span
  {
      -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-group .panel span
  {
      margin-left: 350px;
      margin-top: 390px;
      position: absolute;
      width: 100%;
  }
  
  .bordered {
      border: 1px solid #e3e3e3;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      padding: 5px 5px 5px 5px;
      margin-top: 5px;
  }
  </code></pre>