title: How to change background color of a collapse children element and make it come together?
body: <p>I have made a checkbox and When it's checked Collapse element comes out with a background color.Element comes out first then the background color changed.I want this should happen together.I have made a fiddle
  <a href="https://jsfiddle.net/Priom/ad3m7nsk/8/" rel="nofollow noreferrer">https://jsfiddle.net/Priom/ad3m7nsk/8/</a></p>
  
  <p>Here Is the markup----</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;h1&gt;I am an experienced Engineer because&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12"&gt;
          &lt;label&gt;
                      &lt;h3&gt;1) I have an engineering degree
                          &lt;span&gt;&lt;input type="checkbox" class="check1" data-toggle='collapse' data-target='#collapsediv1' aria-expanded="false" aria-controls="collapsediv1"&gt;&lt;/span&gt;&lt;/h3&gt;
                      &lt;/label&gt;
          &lt;div class="col-md-12 collapse" id="collapsediv1" aria-expanded="false"&gt;
            &lt;p&gt;Sorry engineering degree is useles.Please wait for your practilal engineering training&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12"&gt;
          &lt;label&gt;
                          &lt;h3&gt;2) I have an engineering job
                              &lt;span&gt;&lt;input type="checkbox" class="check2" data-toggle='collapse' data-target='#collapsediv2' aria-expanded="false" aria-controls="collapsediv2"&gt;&lt;/span&gt;&lt;/h3&gt;
                          &lt;/label&gt;
          &lt;div class="col-md-12 collapse" id="collapsediv2" aria-expanded="false"&gt;
            &lt;p&gt;Having jsut an Engineering degree is just not good enough&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>::-webkit-scrollbar {
    width: 0px !important;
  }
  .pad {
    padding-top: 8px;
  }
  
  .back {
    background-color: #E9ECEF;
    padding-top: 13%;
    padding-bottom: 13%;
  }
  
  h1 {
    color: #0000FE;
    font-weight: bold;
    font-size: 30px;
  }
  .collapse p {
    padding: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px #FFEEBA solid;
    background-color: #F2DEDE;
  }
  h3 {
    font-weight: bold;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>