title: How to toggle panel header on sidebar vertically in bootstrap
body: <p>Panel with header on sidebar is working fine but I am unable to 
  toggle the header by adding another tab to it, here html,css and links to add in head tag are given.I want same panel with toggle header functionality how to acheive it.how to make it responsive. when I tried to add another title to it first title is not displaying.    </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> .panel
      {
      position: relative;
      height:100px;
      }
  
      .panel-default &gt; .panel-leftheading
      {
      color: #333;
      background-color: #f5f5f5;
      border-color: #ddd;
      }
  
      .panel-primary &gt; .panel-leftheading
      {
      color: #fff;
      background-color: #428bca;
      border-color: #428bca;
      }
      .panel-leftheading
      {
      width: 42px;
      padding: 10px 15px;
      border-right: 1px solid transparent;
      border-bottom: 1px solid transparent;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      float: left;
      height: 100%;
      position: absolute;
      }
  
       .panel-lefttitle
      {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 15px;
      font-size: 16px;
      color: inherit;
      -webkit-transform: rotate(90deg);
      -webkit-transform-origin: left top;
      -moz-transform: rotate(90deg);
      -moz-transform-origin: left top;
      -ms-transform: rotate(90deg);
      -ms-transform-origin: left top;
      -o-transform: rotate(90deg);
      -o-transform-origin: left top;
      transform: rotate(90deg);
      transform-origin: left top;
      position: absolute;
      white-space: nowrap;
      }
  
      .panel-rightbody
      {
      float: left;
      margin-left: 45px;
      padding: 15px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- ************* ---&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
      &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt; 
     &lt;/script&gt;
      &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      
      &lt;div class="container"&gt;
           
          &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-leftheading"&gt;
                &lt;h3 class="panel-lefttitle"&gt;Panel title&lt;/h3&gt;
                &lt;/div&gt;
               &lt;div class="panel-rightbody"&gt;
               &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .&lt;/p&gt;
                &lt;/div&gt;
              &lt;div class="clearfix"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
           &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>