Jak zrobić zwinięcie akordeonu Bootstrap v4 po kliknięciu całego div nagłówka?

Question

Początkowo akordeon ładowania 4 jest składany, gdy obszar z tekstem jest kliknięty. Jak mogę sprawić, by był składany na cały obszar tego elementu div.

Tutaj kod bootstrap.

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

dodać ten styl do css

.mb-0 > a { 
    display: inline-block; 
    width: 100%; 
    padding:0.75rem 1.25rem; 
} 
.card-header { 
    padding:0; 
} 

Spróbuj z demo, uruchom fragment i kliknij pełny widok ekranu

.mb-0 > a { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding:0.75rem 1.25rem; 
 
} 
 
.card-header { 
 
    padding:0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<style> 
 

 
.mb-0 > a { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding:0.75rem 1.25rem; 
 
} 
 
.card-header { 
 
    padding:0; 
 
} 
 

 
</style> 
 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingOne"> 
 
     <h5 class="mb-0"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h5> 
 
    </div> 
 

 
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingTwo"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

Answer 2

Wystarczy zmienić kolejność kotwicy, Nie znalazłem innego łatwego rozwiązania.

Zauważ, że v4 bootstrapu jest w tej chwili w wydaniu alpha iw tym momencie daje jakiś dziwny błąd skryptu.

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

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 

 

 

 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="card"> 
 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
    <div class="card-header" role="tab" id="headingOne" > 
 
     <h5 class="mb-0"> 
 
     
 
      Collapsible Group Item #1 
 
     
 
     </h5> 
 
    </div> 
 
</a> 
 
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion"> 
 
     <h5 class="mb-0"> 
 
    
 
      Collapsible Group Item #2 
 
     
 
     </h5> 
 
    </div> 
 
    </a> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="card-block"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Wystarczy użyć data-target na div nagłówka ..

<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
    <h5 class="mb-0"> 
     <a href> 
      Collapsible Group Item #1 
     </a> 
    </h5> 
</div> 

http://www.codeply.com/go/f6LLnOaKHu