How can I fix my bootstrap accordion to behave normal?

Question

I have an accordion, when I click on " view report ", one of my span is kind of extended as part of my panel-body for about 3 seconds and then it disappear back.

Curious ... ?

I'm not exactly sure why it does that.

Click here to see - what I'm talking about.

I tried to inspect element on Chrome, and I couldn't figure it out what cause that or which DOM ?

Can anyone explain why is that happen - and help me get rid of it ?

---

CODE

<style type="text/css">

 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report, .sa-hide {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}

.sa-hide-btn, .sa-report-btn {
  cursor: pointer;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 col-sm-1">

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-sm-6 col-lg-6">
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


         <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-report-btn" width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span><span class="sa-h6 sa-report-btn">VIEW REPORT</span></span>
          </span>
        </span>

        <!-- Report -->
        <span class="sa-hide hidden">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-hide-btn" width="40px" src="/BIM/resources/images/icons-report/hidedetails_white.png"><br>
           <span><span class="sa-h6 sa-hide-btn">HIDE DETAILS</span></span>
          </span>
        </span>


      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     <p style="color:red;"> RED </p>

   </div>
 </div>
</div>

</div>
</div>
</div>

---

JSFiddle

Answer 1

I made little change in your markup, just changed p to div:

Changes in HTML:

<div> <!-- changed this p tag to div -->
    <span class="sa-h5">SECTION</span>
    <br>
    <span class="sa-h1">2.2</span>
    <br><span class="sa-h5">EXERCISE</span>
</div>

--Working DEMO--

Reason observed: This is causing problem because of bootstrap default css for p margin: 0 0 10px;. Your code also work perfectly if you give margin: 0px to your p tag. Like in following example

<p style="margin:0px">
    <span class="sa-h5">SECTION</span>
    <br>
    <span class="sa-h1">2.2</span>
    <br>
    <span class="sa-h5">EXERCISE</span>
</p> 

--Working Demo with P--

Answer 2

Your .panel-heading class needs more height. Your .col-md-1 column on the left side is higher then the rest of the row, causing the "RED" paragraph to be pushed to the right.

So one way of resolving this is: Instead of height: 114px; on the .panel-heading class, either remove it completely or make it a higher value.

Answer 3

Why use a paragraph <p> tag when there is no paragraph in between the tags. Kidding.!

Just replace your <p> tag with <div>, and you are good to go.! Refer the code below:

Change this:

<p>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</p>

To this:

<div>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</div>

FIDDLE