Bootstrap di Twitter espandi/comprimi tutto - nelle schede di bootstrap

Question

Sto usando le schede di Twitter Bootstrap per contenere una fisarmonica di domande frequenti in ogni scheda. Il requisito è avere un pulsante espandi/comprimi tutto per ogni scheda che espande/comprime le risposte. Al momento il pulsante Espandi/Comprimi funziona correttamente per la prima scheda caricata. Tuttavia, quando faccio clic su un'altra scheda e eseguo lo stesso pulsante, non funziona. Quando faccio clic sulla scheda iniziale che carica, non funziona più neanche.

Ecco il codice HTML jsfiddle

seguito

<ul class="nav nav-tabs" id="tabFAQ"> 
     <li class="active"><a href="#GQ">General Questions</a></li> 
     <li><a href="#ICQ">Insurance Coverage</a></li> 
     <li><a href="#PQ">Payment</a></li> 
     <li><a href="#FQ">Forms</a></li> 
     <li><a href="#CQ">Claims</a></li> 
    </ul> 
    <div class="tab-content" id="faqContent"> 
     <div class="tab-pane active" id="GQ"> 
      <div class="accordion" id="generalQuestions"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseOne_GQ">Q. What do I do if I’m having trouble logging in?</a> 
        </div> 
        <div id="collapseOne_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Please contact our Customer Care team at 800-821-7303 for assistance. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseTwo_GQ">Q. Will additional online services be added to this portal?</a> 
        </div> 
        <div id="collapseTwo_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes. We will be adding many online services to this portal over the next six months. Please check back often.</div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseThree_GQ">Q. What information am I able to access on this portal?</a> 
        </div> 
        <div id="collapseThree_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. We currently have the ability to display any premiums that are currently due and allow you to make an immediate one-time payment from your checking account, savings account, Visa or MasterCard. Your payment will be confirmed immediately. Other functions are planned to be added to the portal over the next six months. Check back often. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour_GQ">Q. Can I choose my own Username and Password?</a> 
        </div> 
        <div id="collapseFour_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can choose your own Username and Password. We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used. A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive_GQ">Q. Can I update by email address online?</a> 
        </div> 
        <div id="collapseFive_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, but I have no idea how right now. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="ICQ"> 
      <div class="accordion" id="Div1"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_ICQ">Q. Insurance Coverage question Stub for Later? </a> </div> 
         <div id="collapseOne_ICQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="PQ"> 
     <div class="accordion" id="accordion3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne_PQ">Q. When is my payment actually made to my account? </a> </div> 
         <div id="collapseOne_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Your payment is posted to your account within 24 hours after receipt of the funds. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSeven_PQ">Q. What is a one-time payment? </a> </div> 
         <div id="collapseSeven_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseEight_PQ">Q. How do I know my payments are secure? </a> </div> 
         <div id="collapseEight_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Our portal uses encryption software and hardware to protect your information. For more information, view our <a href="#">Privacy Policy</a>. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseNine_PQ">Q. Can I use a debit card to make a one-time online payment? </a> </div> 
         <div id="collapseNine_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTen_PQ">Q. Can I use a credit card to make a one-time online payment? </a> </div> 
         <div id="collapseTen_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your Visa or MasterCard credit card to make a payment. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="FQ"> 
      <div class="accordion" id="Div3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_FQ">Q. Forms Question Stub for Later? </a> </div> 
         <div id="collapseOne_FQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="CQ"> 
      <div class="accordion" id="Div5"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_CQ">Q. Claims Question Stub for Later? </a> </div> 
         <div id="collapseOne_CQ" class="accordion-body collapse in"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Javascript In basso:

$(document).ready(function() { 
$('.modal').appendTo($("body")); 

$('#tabFAQ a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

$('.expandcollapse').click(function() { 

    $('.collapse').each(function(index) { 
     $(this).collapse("toggle"); 
    }); 

    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") { 
     $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All"); 
    } 
    else { 
     $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All"); 
    }; 
}); 

});

Mi chiedevo se era perché l'altro contenuto della scheda non è stato caricato nel DOM quando la pagina viene inizialmente caricata. Quindi ho usato la funzione jquery .each() sperando che si sarebbero attivati ​​anche se inizialmente non fossero stati caricati.

Qualcuno può aiutarmi a rilevare il motivo per cui il pulsante smette di funzionare quando vengono selezionate le schede?

Answer 1

Ci sono due problemi:

1) Bootstrap utilizza scrollHeight transizione all'altezza dei div .collapse ma scrollHeight è sempre 0 quando non è visualizzato un elemento; quando si fa clic sul pulsante Espandi tutto, le altezze delle div .collapse nelle schede nascoste non possono essere impostate correttamente.

2) L'evento ontransitionend non attiva elementi non visualizzati. Bootstrap imposta un flag (transizione) nel suo metodo di compressione che viene reimpostato in ontransitionend, tuttavia ontransitionend non viene mai attivato per gli elementi non visualizzati. Una volta fatto clic sul pulsante Espandi tutto, Bootstrap pensa che tutte le immersioni .collapse non visualizzate siano in transizione e che ogni chiamata successiva al metodo di compressione di questi div sia in cortocircuito.

Dal momento che non si ha il controllo su uno di questi problemi, ciò che deve essere fatto è quello di comprimere solo il div della scheda attiva quando il vostro Espandi/Comprimi tutto fa clic sul pulsante e per aggiornare l'impostazione crollo delle div in una scheda quando diventa attiva.

L'ho messo insieme in un aggiornamento del jsfiddle.

Aggiornato HTML:

<ul class="nav nav-tabs" id="tabFAQ"> 
     <li class="active"><a href="#GQ" data-toggle="tab" state="0">General Questions</a></li> 
     <li><a href="#ICQ" data-toggle="tab" state="0">Insurance Coverage</a></li> 
     <li><a href="#PQ" data-toggle="tab" state="0">Payment</a></li> 
     <li><a href="#FQ" data-toggle="tab" state="0">Forms</a></li> 
     <li><a href="#CQ" data-toggle="tab" state="0">Claims</a></li> 
    </ul> 
    <div class="tab-content" id="faqContent"> 
     <div class="tab-pane active" id="GQ"> 
      <div class="accordion" id="generalQuestions"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseOne">Q. What do I do if I’m having trouble logging in?</a> 
        </div> 
        <div id="collapseOne" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Please contact our Customer Care team at 800-821-7303 for assistance. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseTwo">Q. Will additional online services be added to this portal?</a> 
        </div> 
        <div id="collapseTwo" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes. We will be adding many online services to this portal over the next six months. Please check back often.</div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseThree">Q. What information am I able to access on this portal?</a> 
        </div> 
        <div id="collapseThree" class="accordion-body collapse"> 
         <div class="accordion-inner">A. We currently have the ability to display any premiums that are currently due and allow you to make an immediate one-time payment from your checking account, savings account, Visa or MasterCard. Your payment will be confirmed immediately. Other functions are planned to be added to the portal over the next six months. Check back often. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour">Q. Can I choose my own Username and Password?</a> 
        </div> 
        <div id="collapseFour" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can choose your own Username and Password. We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used. A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive">Q. Can I update by email address online?</a> 
        </div> 
        <div id="collapseFive" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, but I have no idea how right now. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="ICQ"> 
      <div class="accordion" id="Div1"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Insurance Coverage question Stub for Later? </a> </div> 
         <div id="Div2" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="PQ"> 
      <div class="accordion" id="accordion3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSix">Q. When is my payment actually made to my account? </a> </div> 
         <div id="collapseSix" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Your payment is posted to your account within 24 hours after receipt of the funds. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSeven">Q. What is a one-time payment? </a> </div> 
         <div id="collapseSeven" class="accordion-body collapse"> 
         <div class="accordion-inner">A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseEight">Q. How do I know my payments are secure? </a> </div> 
         <div id="collapseEight" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Our portal uses encryption software and hardware to protect your information. For more information, view our <a href="#">Privacy Policy</a>. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseNine">Q. Can I use a debit card to make a one-time online payment? </a> </div> 
         <div id="collapseNine" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTen">Q. Can I use a credit card to make a one-time online payment? </a> </div> 
         <div id="collapseTen" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your Visa or MasterCard credit card to make a payment. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="FQ"> 
      <div class="accordion" id="Div3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Forms Question Stub for Later? </a> </div> 
         <div id="Div4" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="CQ"> 
      <div class="accordion" id="Div5"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Claims Question Stub for Later? </a> </div> 
         <div id="Div6" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Aggiornato JavaScript:

$('.expandcollapse').click(function() { 

    var newstate = $(this).attr('state')^1, 
     icon = newstate ? "minus" : "plus", 
     text = newstate ? "Collapse" : "Expand"; 

    $('.nav-tabs').children().each(function(index) { 
     if($(this).hasClass('active')) { 
      var tab = $(this).children(':first'); 
      toggleTab(tab.prop('hash')); 
      tab.attr('state',newstate); 
     } 
    }); 

    $(this).html("<i class=\"icon-white icon-" + icon + "-sign\"></i> " + text +" All"); 

    $(this).attr('state',newstate) 

}); 

$('a[data-toggle="tab"]').on('shown', function (e) { 

    var myState = $(this).attr('state'), 
     state = $('.expandcollapse').attr('state'); 

    if(myState != state) { 
     toggleTab($(this).prop('hash')); 
     $(this).attr('state',state); 
    } 

}) 

function toggleTab(id){ 

    $(id).find('.collapse').each(function() { 
     $(this).collapse('toggle'); 
     }); 

} 

Answer 2

Per iniziare, vedo che stai usando questa stessa ancora (href = "# collapseOne") più volte, assicurati che siano tutti unici per evitare conflitti.