Collapsible forum table

I wish i would see collapsible forum container for ISP Config 2 (collapsed by default), because it's already old and nobody writes something down on there.

It's possible to obtain by means of jquery:

HTML:

  <style type="text/css">
     @media only screen and  (min-width: 768px) {
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}
}
@media only screen and  (min-width: 768px) {
.col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}
}
 .col-sm-6, .col-md-6 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
*, ::before, ::after {
    box-sizing: inherit;
}
a, [role="button"] {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
.collapse {
    display: none;
}
a {
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
h4 {
    margin-top: 0;
    margin-bottom: .5rem;
}
       h3 {
   font-size: 24px;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  font-weight: 300;
}

.container {
  max-width: 970px;
}

div[class*='col-'] {
  padding: 0 30px;
}

.wrap {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

a:focus,
a:hover,
a:active {
  outline: 0;
  text-decoration: none;
}

.panel {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}

.panel:last-child {
  border-bottom: none;
}

.panel-group > .panel:first-child .panel-heading {
  border-radius: 4px 4px 0 0;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-group .panel + .panel {
  margin-top: 0;
}

.panel-heading {
  background-color: #009688;
  border-radius: 0;
  border: none;
  color: #fff;
  padding: 0;
}

.panel-title a {
  display: block;
  color: #fff;
  padding: 15px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
}

.panel-body {
  background: #fff;
}

.panel:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}

.panel:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  transition: border-radius 0.3s linear 0.2s;
}

.panel:last-child .panel-heading.active {
  border-radius: 0;
  transition: border-radius linear 0s;
}
/* #bs-collapse icon scale option */

.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.panel-heading.active a:before {
  content: ' ';
  transition: all 0.5s;
  transform: scale(0);
}

#bs-collapse .panel-heading a:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

#bs-collapse .panel-heading.active a:after {
  content: '\e909';
  transform: scale(1);
  transition: all 0.5s;
}
/* #accordion rotate icon option */

#accordion .panel-heading a::before {
    content: '\f151';
    font-size: 24px;
    position: absolute;
    font-family: 'fontawesome';
    right: 5px;
    top: 10px;
    transform: rotate(180deg);
    transition: all 0.5s;
}

#accordion .panel-heading.active a:before {
  transform: rotate(0deg);
  transition: all 0.5s;
}
.collapse.show {

    display: block;

}
      </style>

<div class="container">
<div class="col-md-6 col-sm-6">
    <h3>Table</h3>
    <div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Header of collapsible body
        </a>
      </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
     collapsible items'
A L L O T M E N T
          </div>
       
        </div>
      </div>
      <!-- end of panel -->
 
    </div>
 
    <!-- end of #accordion -->

  </div>
 
  <!-- end of wrap -->

</div>

<!-- end of container -->




<script type="text/javascript" src="/jquery-1.10.0.min.js"></script>

<script type="text/javascript" src="/bootstrap.min.js"></script>

<script type="text/javascript">
 
(function ($) {
//augment collapse-class to forum-container
 $("#ispconfig-2.14").addClass("collapse");
// OR
$("#ispconfig-2.14").append('<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">')


$('.collapse.in').prev('.panel-heading').addClass('active');
  $('#accordion, #bs-collapse')
    .on('show.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').removeClass('active');
    });
}(jQuery));
 
  </script>