title: Bootstrap accordion with show / hide text in header panel
body: <p>if panel open Sectors and Issue tag should be hide and if panel is collapsed Sectors and Issue should be visible shown.</p>
  
  <p>here is my js file </p>
  
  <pre><code>          $(window).load(function () {
              var parent = $('.panel-group .panel-heading');
              parent.each(function (i, el) {
                  //el is element used for "{var parent}" class to execute value one by one 
                  var el = $(el);
                  var collapsed = el.find('.panel-title a').hasClass('collapsed');
  
                  if (collapsed == true) {
                      el.find(".show-hide-si").show('slow');
                  } else {
                      el.find(".show-hide-si").hide('slow');
                  }
  
                  /**
                   * this will run on click to show and hide for sector&amp;issues
                   * this is tricky,if you click and class is collapsed 
                   */
                  el.find('.panel-title a').click(function () {
                      var collapsed = $(this).hasClass('collapsed');
                      if (collapsed == false) {
                          el.find(".show-hide-si").show('slow');
                      } else {
                          el.find(".show-hide-si").hide('slow');
                      }
                  });
  
              });
          });
  </code></pre>
  
  <p>This is working but if panel-p1 is  open and i click on panel-p2 both panel text get hide.</p>
  
  <p>My data is dynamic so using class like this <code>&lt;div id="collapse_&lt;?php print $key; ?&gt;"</code> instead of collapseOne,Two,Three.</p>
  
  <p>In HTML</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
  &lt;div class="panel panel-default" id="panel&lt;?php print $key; ?&gt;"&gt;
      &lt;div class="panel-heading" role="tab" id="heading_&lt;?php print $key; ?&gt;"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a &lt;?php print $clsa; ?&gt; role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_&lt;?php print $key; ?&gt;" aria-expanded="true" aria-controls="collapse_&lt;?php print $key; ?&gt;"&gt;
                  Program : &lt;?php print $ptitle; ?&gt;
              &lt;/a&gt;                
          &lt;/h4&gt;
          &lt;div class="show-hide-si"&gt;
              &lt;div class="sector"&gt;Sectors : &lt;?php print $sectors_of_interes; ?&gt;&lt;/div&gt;
              &lt;div class="issues"&gt;Issues : &lt;?php print $pro_problem; ?&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="collapse_&lt;?php print $key; ?&gt;" class="panel-collapse &lt;?php print $clsin; ?&gt;" role="tabpanel" aria-labelledby="heading_&lt;?php print $key; ?&gt;"&gt;
          &lt;div class="panel-body"&gt;
  </code></pre>
  
  <p>other issue is if i click on Panel P2 it's open then i click P1(P1 which  is close),P1 open but P2 didn't get close both are open.  </p>