Bootstrap has provided accordion “Collapse” JavaScript plugins for Bootstrap users, but has no explanation making the accordion partially expand and collapse.

Below is the demo/template to build your accordion partially expand and collapse within the given height. The HTML includes CDN (content delivery network) to connect Bootstrap/Jquery’s CSS and JavaScript files, so it’s ready to be used! Click to download below.

DEMO: How It Looks

HTML

<div class="accordion partialcollapse" id="partialcollapse">
  <div id="collapse-one" class="collapse" aria-labelledby="headingOne" data-parent="#partialcollapse">
    <h4>Accordion Title</h4>
    <p>Accordion content goes here</p>
  </div>
  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one"> </button>
</div>

CSS

.partialcollapse .collapse {
    display: block;
    height: 120px !important;
    overflow: hidden;
}
.partialcollapse .collapsing {
    height: inherit!important;
}
.partialcollapse .collapse.show {
    height: auto !important;
} 
.partialcollapse .collapse+button:after {
    content: '+ Show More';
}
.partialcollapse .show+button:after, .partialcollapse .collapsing+button:after {
    content: '- Show Less';
}