Simple Bootstrap Accordion

index.html

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

<div class="containerx container">
  <div id="accordion" class="panel-group">
    <div class="panel">
      <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#panelBodyOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">Custom Post To Send Like</a>
        </h4>
      </div>
      <div id="panelBodyOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <label>Paste URL Post To Box</label>
        <label class="text-muted">Click <i class="fa fa-facebook-square"></i> To Submit</label>
<form id="cus" class="form-inline" role="form" action="?custom" method="POST">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><button type="submit" class="form-control btn btn-primary"><i class="fa fa-facebook-square"></i></button></span>
            <input name="custom" id="url_post" type="url" class="form-control" placeholder="https://m.facebook.com/story.php?story_fbid=2129390433796287&id=100001760546985">
<select name="type" class="form-control">
	<option value="1" selected="selected">Like</option>
	<option value="2">Super</option>
	<option value="3">Wow</option>
	<option value="4">Haha</option>
	<option value="7">Sedih</option>
	<option value="8">Marah</option>
</select>          
        </div>
      
    </div>
</form>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#panelBodyTwo" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion">Custom Post List</a>
        </h4>
      </div>
      <div id="panelBodyTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <custom/>
        </div>
      </div>
    </div>
    <div class="panel d-none">
      <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#panelBodyThree" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion">Your Last Reacted</a>
        </h4>
      </div>
      <div id="panelBodyThree" class="panel-collapse collapse">
      <div class="panel-body">
          <p>Energistically drive standardized communities through user friendly results. Phosfluorescently initiate superior technologies vis-a-vis low-risk high-yield solutions. Objectively facilitate clicks-and-mortar partnerships vis-a-vis superior partnerships. Continually generate long-term high-impact methodologies via wireless leadership. Holisticly seize resource maximizing solutions via user friendly outsourcing.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
$('form#cus').submit(function() { 
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        complete: function(data){
        }
     });
});
</script>
<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->

simple-bootstrap-accordion.markdown

Simple Bootstrap Accordion

A Pen by dimas lanjaka on CodePen.

License.

style.css

.containerx {
  width: 100%;
  margin-top: 3em;
}
.d-none { display: none }
.containerx #accordion .panel {
  border-radius: 0;
  border: 0;
  margin-top: 0px;
}
.containerx #accordion a {
  display: block;
  padding: 10px 15px;
  border-bottom: 1px solid #b42b2b;
  text-decoration: none;
}
.containerx #accordion .panel-heading a.collapsed:hover,
.containerx #accordion .panel-heading a.collapsed:focus {
  background-color: #b42b2b;
  color: white;
  transition: all 0.2s ease-in;
}
.containerx #accordion .panel-heading a.collapsed:hover::before,
.containerx #accordion .panel-heading a.collapsed:focus::before {
  color: white;
}
.containerx #accordion .panel-heading {
  padding: 0;
  border-radius: 0px;
  text-align: center;
}
.containerx #accordion .panel-heading a:not(.collapsed) {
  color: white;
  background-color: #b42b2b;
  transition: all 0.2s ease-in;
}

/* Add Indicator fontawesome icon to the left */
.containerx #accordion .panel-heading .accordion-toggle::before {
  font-family: 'FontAwesome';
  content: '\f00d';
  float: left;
  color: white;
  font-weight: lighter;
  transform: rotate(0deg);
  transition: all 0.2s ease-in;
}
.containerx #accordion .panel-heading .accordion-toggle.collapsed::before {
  color: #444;
  transform: rotate(-135deg);
  transition: all 0.2s ease-in;
}

Style1 custom BOT FB