Как убрать нижнее поле в заголовке гармошки в начальной загрузке 4?

Question

Как удалить margin-top из заголовка карты в начальной загрузке гармошки.Я хочу margin-top, когда коллапс близок, но когда открытый коллапс, удалите margin-top.потому что, когда открыт коллапс, то больше места отображается в нижней части коллапса.Какое решение для этой проблемы также я прикрепляю то, что я хочу в изображении.

я хочу этот тип изображения

img {
  max-width: 100%;
}
  #accordion .card-header {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #eee;
  padding-left: 0;
  padding-right: 0;
  margin-top: 40px;
}
#accordion .card-header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
#accordion .card-header button {
  padding-left: 0;
  padding-right: 0;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  color: #dc3545;
}
#accordion .card-header button:hover {
  color: #313131;
}
.card {
  border: none;
}
.collapse-content {
  padding: 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center mt-4">
        <h1>Faq</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div id="accordion">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Lorem Ipsum is simply 1</button>
              </h5>
            </div>

          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="row h-100">
            <div class="col-md-6">
              <img alt="" src="http://placekitten.com/1000/500" />
            </div>
            <div class="col-md-6 collapse-content">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
              <button type="button" class="btn btn-danger">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Lorem Ipsum is simply 2</button>
          </h5>
        </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="row h-100">
          <div class="col-md-6">
            <img alt="" src="http://placekitten.com/1000/500" />
          </div>
        <div class="col-md-6 collapse-content">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
         <button type="button" class="btn btn-danger">Submit</button>
       </div>
     </div>
   </div>
 </div>
 <div class="card">
   <div class="card-header" id="headingThree">
     <h5 class="mb-0">
       <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Lorem Ipsum is simply 3</button>
     </h5>
   </div>
 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
   <div class="row h-100">
     <div class="col-md-6">
       <img alt="" src="http://placekitten.com/1000/500" />
     </div>
   <div class="col-md-6 collapse-content">
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>
     <button type="button" class="btn btn-danger">Submit</button>
   </div>
 </div>
</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </section>
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 1

Если вы хотите удалить лишний пробел внизу свертки, просто удалите класс h-100.

Теперь, для взаимодействия, которое вы хотите, добавьте класс для добавления или удаления margin-top.

Это должно работать:

CSS:

#accordion .card-header.active {
  margin-top: 0;
}

Примечание: важна специфичность.

HTML (добавьте класс 'active' втот, который уже открыт, иначе вам не нужно):

<div class="card-header active" id="headingOne">

JQUERY:

$('.card-header .btn').click(function() {
    if (!$(this).parent().parent().hasClass('active')) {
        $('.card-header').removeClass('active');
        $(this).parent().parent().addClass('active')
    } else {
        $(this).parent().parent().removeClass('active')
    }
}))

Сначала удаляется «активный» класс из остальных элементов div., затем добавляет к текущему нажатому div.

Надеюсь, это поможет.