title: Open / Close Bootstrap accordion with different buttons
body: <p>I'm hoping someone can help. I have a jsfiddle set up here - <a href="https://jsfiddle.net/henry_ivory/Lr3n5pjw/" rel="nofollow noreferrer">https://jsfiddle.net/henry_ivory/Lr3n5pjw/</a></p>
  
  <p>Here's that fiddle as a snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '.collapse-link-1', function(e) {
    //alert("open accordions--&gt;");
    $('.collapseOne').collapse('toggle');
  });
  
  $(document).on('click', '.collapse-link-2', function(e) {
    //alert("open accordions--&gt;");
    $('.collapseTwo').collapse('toggle');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /&gt;
  &lt;div class="product-title" style="width:100%;text-align:center;color:black;"&gt;
      &lt;h3&gt;Email&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6"&gt;
      &lt;div class="panel-group" id="LHS"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a id="L1" class="collapsed  collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_L"&gt;LHS1&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;!--/.panel-heading --&gt;
              &lt;div id="collapseOne_L" class="panel-collapse collapseOne collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Welcome LHS1
                  &lt;/div&gt;
                  &lt;!--/.panel-body --&gt;
              &lt;/div&gt;
              &lt;!--/.panel-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.panel --&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a id="L2" class="collapsed  collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_L"&gt;
                          LHS2
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;!--/.panel-heading --&gt;
              &lt;div id="collapseTwo_L" class="panel-collapse collapseTwo collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Welcome LHS2
                  &lt;/div&gt;
                  &lt;!--/.panel-body --&gt;
              &lt;/div&gt;
              &lt;!--/.panel-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.panel --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6"&gt;
      &lt;div class="panel-group" id="RHS"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a id="L1" class="collapsed  collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_R"&gt;
                          RHS1
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;!--/.panel-heading --&gt;
              &lt;div id="collapseOne_R" class="panel-collapse collapseOne collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Welcome RHS1
                  &lt;/div&gt;
                  &lt;!--/.panel-body --&gt;
              &lt;/div&gt;
              &lt;!--/.panel-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.panel --&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a id="L2" class="collapsed collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_R"&gt;
                          RHS2
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;!--/.panel-heading --&gt;
              &lt;div id="collapseTwo_R" class="panel-collapse collapseTwo collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Welcome RHS2
                  &lt;/div&gt;
                  &lt;!--/.panel-body --&gt;
              &lt;/div&gt;
              &lt;!--/.panel-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.panel --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/r0daS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0daS.jpg" alt="structure"></a></p>
  
  <p>if a user clicks on the title (email etc) or the product name or logo then all panels within that section (email etc) will need to open at once, and collapse. Also pressing the + on the bar will cause the 4 panels to expand and collapse.</p>
  
  <p>the amount of panels may increase in each section so needs to be scalable. I think I'm close but my javascript skills are limited!</p>