Passa da schede a compressione per reattivo

Question

L'obiettivo è passare da una scheda a una compressione di stile a fisarmonica quando il sito è largo meno di 676 px. Stiamo usando Bootstrap.

Nasconderemo ul.nav-tabs e a.accordtion-toggle rispettivamente con css. Le schede funzionano qui, ma i pulsanti a.accordion non funzionano. Qualche idea?

<ul class="nav nav-tabs" id="myTab" data-tabs="tabs"> 
    <li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>  
    <li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li> 
</ul> 

<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a> 
    <div class="tab-pane collapse" id="panel1"> 
Panel 1 Content 
    </div> 
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a> 
    <div class="tab-pane collapse" id="panel2"> 
Panel 2 Content 
    </div> 

<script> 
    jQuery(document).ready(function ($) { 
    if (document.documentElement.clientWidth < 767) { 
     $('#myTab a').click(function (e) { 
      e.preventDefault(); 
     } 

     $(".collapse").collapse(); 
    }    
    }); 
</script> 

Answer 1

Ho provato un po ', ma this jsfiddlesembra complicato per fare entrambe le plugins lavorano insieme.

Potrebbe essere preferibile optare per uno dei plug-in, utilizzando solo le classi e JS di questo plug-in e quindi implementare i propri trigger per completare il comportamento predefinito.

---

penso che il comportamento della fisarmonica del plugin crollo ha bisogno la struttura .accordion-group > .collapse.in per funzionare correttamente - se non si utilizza il proprio JS.

Answer 2

Ho finito per annidare i trigger di tabulazione all'interno di un div con il contenuto a schede (invece di un elenco sopra) e utilizzando css per posizionarli come schede per la visualizzazione a schermo intero. Non ideale, ma funziona fintanto che l'interruttore di dati e il bersaglio dei dati sono a posto.

Answer 3

Non sono sicuro che sia d'aiuto, ma è possibile utilizzare window.onresize = function() {} e verificare la larghezza del contenitore principale. Quando è inferiore a una certa larghezza, puoi sostituire il contenuto usando js.

Answer 4

Nel mio caso, copiare i contenuti delle schede in una fisarmonica nascosta funzionava bene.

Qui è la fonte ho estratto a piccolo plugin - Bootstrap Tab Collapse