<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>Приморские краевые олимпиады</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="/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js"></script>
<script type="text/javascript" src="/sites/all/libraries/bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

(function ($) {
$('.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>