बूटस्ट्रैप 4 टैब Accordion के लिए। कैसे?

Question

मैंने googled और पाया कि कैसे बूटस्ट्रैप 3 टैब को Bootstrap 3 tab to accordion पर उत्तरदायी में accordion के लिए बनाना है, लेकिन मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं और मुझे नहीं पता कि इसे बूटस्ट्रैप 4 टैब में एग्रीजन में कैसे परिवर्तित किया जाए। क्रिप्या मेरि सहायता करे।

धन्यवाद!

Answer 1

बूटस्ट्रैप 4 में आप निम्न कार्यक्षमता के साथ उस कार्यक्षमता को प्राप्त कर सकते हैं।
(बिल्ट-इन टुकड़ा दर्शक बातें कभी कभी जब सीएसएस @media प्रश्नों शामिल अप मिक्स रूप में, मैं एक Codepen भी बना लिया है।)

एचटीएमएल

<div class="container"> 
    <ul id="tabs" class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
     <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a> 
    </li> 
    <li class="nav-item"> 
     <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a> 
    </li> 
    <li class="nav-item"> 
     <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a> 
    </li> 
    </ul> 


    <div id="content" class="tab-content" role="tablist"> 
    <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A"> 
     <div class="card-header" role="tab" id="heading-A"> 
     <h5 class="mb-0"> 
      <a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true" aria-controls="collapse-A"> 
      Collapsible Group Item A 
      </a> 
     </h5> 
     </div> 
     <div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A"> 
     <div class="card-body"> 
      [Tab content A] 
     </div> 
     </div> 
    </div> 

    <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B"> 
     <div class="card-header" role="tab" id="heading-B"> 
     <h5 class="mb-0"> 
      <a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false" aria-controls="collapse-B"> 
      Collapsible Group Item B 
      </a> 
     </h5> 
     </div> 
     <div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B"> 
     <div class="card-body"> 
      [Tab content B] 
     </div> 
     </div> 
    </div> 

    <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C"> 
     <div class="card-header" role="tab" id="heading-C"> 
     <h5 class="mb-0"> 
      <a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false" aria-controls="collapse-C"> 
      Collapsible Group Item C 
      </a> 
     </h5> 
     </div> 
     <div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C"> 
     <div class="card-body"> 
      [Tab content C] 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

सीएसएस

.nav-tabs { 
    display:none; 
} 

@media(min-width:768px) { 
    .nav-tabs { 
    display: flex; 
    } 

    .card { 
    border: none; 
    } 

    .card .card-header { 
    display:none; 
    } 

    .card .collapse{ 
    display:block; 
    } 
} 

@media(max-width:767px){ 
    .tab-pane { 
    display: block !important; 
    opacity: 1; 
    } 
}