JSFiddle - React, Tailwind, and code Playground

Accordion Ui - Build

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne">
        <h4 class="panel-title">Collapsible Group Item #1</h4>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          <img src="http://cdn4.thr.com/sites/default/files/imagecache/scale_crop_768_433/2016/03/trc0200_v005_036854.1094_-h_2016.jpg" />
          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
            vestibulum.</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-controls="collapseTwo">
        <h4 class="panel-title">Collapsible Group Item #2</h4>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  padding-top: 30px;
}

.panel {
  background-color: #FFF;
  box-shadow: none;
}

.panel .panel-heading {
  cursor: pointer;
}

.panel-group .panel {
  border: 1px solid #e8e8e8;
  border-radius: 0;
}

.panel-group .panel + .panel {
  margin-top: -1px;
}

.panel-heading {
  border-radius: 0;
  padding: 15px 44px 15px 25px;
  position: relative;
}

.panel-default > .panel-heading {
  color: #333;
  background-color: #FFF;
  border-color: #e8e8e8;
}

.panel-body {
  padding: 25px;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
  background-color: #556465;
  color: #FFF;
  -webkit-box-shadow: inset 0px 5px 7px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 5px 7px -3px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 5px 7px -3px rgba(0, 0, 0, 0.75);
  position: relative;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -1px;
  left: 20px;
  border-style: solid;
  border-width: 6px 14px 0 14px;
  border-color: #FFF transparent transparent transparent;
}

.panel-heading .fa {
  position: absolute;
  width: 14px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  top: 15px;
  right: 15px;
  color: #333;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.panel-heading .fa.go-up {
  color: #f58546;
  -ms-transform: rotate(-180deg);
  /* IE 9 */
  -webkit-transform: rotate(-180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-180deg);
}

</style> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <style>

JavaScript

$('#accordion').on('show.bs.collapse', '.panel-collapse', function() {
  $(this).siblings('.panel-heading').find('.fa-chevron-down').addClass('go-up');
}).on('hide.bs.collapse', '.panel-collapse', function() {
  $(this).siblings('.panel-heading').find('.go-up').removeClass('go-up');
}).on('shown.bs.collapse', '.panel-collapse', function() {
  var $panel = $(this);
  var panelMargin = 5;
  var offset = $panel.parents('.panel').offset().top - panelMargin;
  $panel.parents('body').animate({
    scrollTop: (offset >= 0) ? "+=" + offset + "px" : "-=" + Math.abs(offset) + "px"
  });
});;