Bootstrap tabcollapse in een accordion

[eyecandy]

Mijn vraag
Hallo, ik bouw een website die gebaseerd is op een bootstrap accordion. In de uit te klappen panels verschijnt de content die is opgedeeld in (bootstrap) tabs. Op de mobiele versie veranderen de tabs ook in een eigen accordion, dit wordt dus een tabcollapse, voor elke panel in de parent accordion.

Het probleem is dat de tabcollapse op zichzelf prima werkt maar niet binnen een accordion panel. De tabs voor de desktopversie verschijnen wel maar de mobiele accordion niet, hier loop ik op vast...
De accordion verschijnt wel nadat ik het browserscherm verschaal maar deze moet direct werken zodra de pagina laadt. In een on load uitgeklapte panel werkt de tabcollapse wel dus hij lijkt te conflicteren als de parent panel (on load) verborgen is.

Relevante software en hardware die ik gebruik
De gebruikte bootstrap tabcollapse plugin. Het probleem doet zich in verschillende browsers voor.

Verkijk ik me ergens op of is het gewoon niet mogelijk om een tabcollapse te laden in een verborgen element? Bedankt voor alle advies.

[allerleidesign]

waarop staan je tabsclass en accordionclass ingesteld?

[eyecandy]

Ik heb een een simpele test aangemaakt, zie hieronder het begin van die code:

HTML:

 <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse" class="panel-collapse collapse in">
      <div class="panel-body">

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Raw denim you probably haven't...</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accus...</p>
    </div>
</div>

De div #collapse heeft dus de 'in' class waardoor die panel al is uitgeklapt, daardoor werkt de tabcollapse in dit voorbeeld. Maar dat panel wil ik dus ingeklapt hebben ('in' class eruit), net als de andere accordion panels, maar dan werkt dus de tabcollapse niet meer. Ik loop nog steeds vast, verdere hulp is meer dan welkom.

[ Voor 0% gewijzigd door RobIII op 12-04-2016 11:19 . Reden: Code tags aangepast ]

[allerleidesign]

ik neem aan dat je ook een css hebt waarin je de verschillende classes definieert? zou je daarvan tevens het relevante stuk kunnen laten zien?

[eyecandy]

Ik heb wel een css-file maar ik heb geen styling aan deze test hangen, de panel-heading neemt alleen wat algemene kleur en font-styling over, verder is het gewoon een simpele, kale test. De hidden/visibility classes regelt de tabcollapse volgens mij via de bijbehorende js-file. Als ik de code bekijk op mobiel formaat laat hij wel de 'visible-xs' class zien in de accordion van de tabcollapse, alleen de accordion zelf wordt niet weergegeven, de parent panel blijft dan leeg.

[allerleidesign]

Ik denk dat dit is wat je wilt bereiken,

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="collapsed" aria-expanded="false" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div style="height: 0px;" aria-expanded="false" id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a aria-expanded="false" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div style="height: 0px;" aria-expanded="false" id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a aria-expanded="false" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div aria-expanded="false" id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>

[ Voor 0% gewijzigd door RobIII op 12-04-2016 11:17 . Reden: Code tags aangepast ]

[RobIII]

allerleidesign schreef op dinsdag 12 april 2016 @ 11:04:
Ik denk dat dit is wat je wilt bereiken,

[quote]

Voor 't posten van code hebben we code tags* En als je iemand wil helpen, plemp dan niet alleen de kant-en-klare oplossing neer (liefst zelfs helemaal niet) maar leg hem/haar uit wat hij/zij moet doen/lezen om zélf het gewenste doel te bereiken

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

* Dat geldt overigens ook voor @eyecandy zie ik.

[ Voor 10% gewijzigd door RobIII op 12-04-2016 11:21 ]

[allerleidesign]

RobIII schreef op dinsdag 12 april 2016 @ 11:17:
[...]

Voor 't posten van code hebben we code tags En als je iemand wil helpen, plemp dan niet alleen de kant-en-klare oplossing neer (liefst zelfs helemaal niet) maar leg hem/haar uit wat hij/zij moet doen/lezen om zélf het gewenste doel te bereiken

Dank voor de code tags, die wist ik niet te vinden in de faq , wellicht gewoon over het hoofd gezien, tis nog vroeg

De code die ik postte is dacht ik nog geen volledige oplossing, gezien het .JS gedeelte niet zichtbaar is en daar ook nog een en ander gewijzigd moet worden als we niet dezelfde js hebben gebruikt.

Maar je hebt inderdaad gelijk, had de stappen moeten beschrijven ipv platte code te dumpen... zoals ik al zei, tis nog vroeg

[eyecandy]

Bedankt voor jullie reacties, maar de hierboven geplaatste code is helaas niet de oplossing, dat is gewoon een accordion? Nogmaals, ik heb al een werkende accordion en een werkende tabcollapse, maar ik wil een tabcollapse werkend krijgen binnen die accordion.

Daarbij vraag ik niet even simpel om een kant en klare oplossing, ik heb me rot gezocht en getest maar loop hier al langer dan een week op vast, vandaar dat ik hier om raad vraag. Een tip waar ik mee vooruit kan ben ik ookal blij mee. Codetags kon ik niet in de editor vinden, vandaar quote gebruikt.

[allerleidesign]

ok nieuwe poging, dus ik ben even met jouw code (die je bovenin aangaf) begonnen.
Op het moment dat ik jouw code met de css en js gebruik die ik voor mijn foute voorbeeld gebruik, werkt het.
zodra ik enkel het woordje "in" verwijder begint de pagina met het accordion gesloten, kan hem openen en switchen tussen de tabs,.

[RobIII]

eyecandy schreef op dinsdag 12 april 2016 @ 14:57:
Daarbij vraag ik niet even simpel om een kant en klare oplossing

Dat heb ik ook niet gezegd

eyecandy schreef op dinsdag 12 april 2016 @ 14:57:
ik heb me rot gezocht en getest maar loop hier al langer dan een week op vast

Dan heb je in die week vast wel wat dingen geprobeerd die je hier kunt laten zien; dan kunnen wij aangeven waar je (mogelijk) de mist in gaat en/of zitten we onze tijd niet te verdoen met dingen aandragen die je al lang-en-breed geprobeerd hebt

eyecandy schreef op dinsdag 12 april 2016 @ 14:57:
vandaar dat ik hier om raad vraag.

En daarvoor ben je hartelijk welkom. We verwachten nou eenmaal een beetje eigen inzet (en die ook terug te zien/lezen in de topicstart; zie ook onze Quickstart).

eyecandy schreef op dinsdag 12 april 2016 @ 14:57:
Een tip waar ik mee vooruit kan ben ik ookal blij mee.

Dan is dit misschien wel een goede tip: plaats eens een testcase (en dus geen volledige pagina maar enkel de benodigde code om je probleem te reproduceren) op https://jsfiddle.net/ en post dan hier 't linkje naar je fiddle. Dan kunnen we allemaal (veel) makkelijker zien wat je code (html/css/js) nou precies is en waar het euvel (potentieel) zit. We kunnen er zo ook veel makkelijker aan 'stoeien' of 'rommelen' om te kijken of oplossing X werkt of niet.

Edit: Ik heb hier vast een voorzetje voor je gemaakt.

eyecandy schreef op dinsdag 12 april 2016 @ 14:57:
Codetags kon ik niet in de editor vinden.

Geen probleem; daarom wijs ik je er op voor een volgende keer

[eyecandy]

@allerleidesign: Mooi dat jij hem werkend hebt gekregen. Maar je geeft aan dat je kunt switchen tussen tabs, dat kan ik ook, het probleem zit hem in het moment dat niet de tabs maar de accordion moet worden weergegeven op mobiel formaat < 768px, on load.

RobIII schreef op dinsdag 12 april 2016 @ 22:25:

Dan heb je in die week vast wel wat dingen geprobeerd die je hier kunt laten zien; dan kunnen wij aangeven waar je (mogelijk) de mist in gaat en/of zitten we onze tijd niet te verdoen met dingen aandragen die je al lang-en-breed geprobeerd hebt

Ik heb genoeg gedaan ja, onder andere in javascript geprobeerd om de 'in' class pas na het laden te verwijderen, de visible-xs class van het panel forceren en meer. Ik heb lang niet alle code opgeslagen die niet bleek te werken, en dat hier posten lijkt me niet zo zinvol. Ik heb ook veel gezocht op internet naar soortgelijke ervaringen, andere tabcollapse opties, het probleem op stackoverflow geplaatst etc.

RobIII schreef op dinsdag 12 april 2016 @ 22:25:

Dan is dit misschien wel een goede tip: plaats eens een testcase (en dus geen volledige pagina maar enkel de benodigde code om je probleem te reproduceren) op https://jsfiddle.net/ en post dan hier 't linkje naar je fiddle. Dan kunnen we allemaal (veel) makkelijker zien wat je code (html/css/js) nou precies is en waar het euvel (potentieel) zit. We kunnen er zo ook veel makkelijker aan 'stoeien' of 'rommelen' om te kijken of oplossing X werkt of niet.

Dat is inderdaad wel makkelijk en daar had ik nog niet aan gedacht. Hier heb ik een voorbeeld gemaakt.

Het scherm met de preview moet dus even versmald worden tot minder dan 768px in de breedte. Wanneer je dan de pagina laadt en het eerste panel opent, is hij als het goed is leeg, terwijl daar een nieuwe accordion zou moeten verschijnen. Wanneer je de breedte van het preview scherm aanpast verschijnt de accordion wel, maar het probleem is dus dat dit niet on load gebeurd (= essentieel op een telefoonscherm).

[allerleidesign]

Ik heb zitten kijken, en die fiddle was inderdaad een goed hulpmiddel.
om eerlijk te zijn kom ik er niet helemaal uit, maar heb wel een site gevonden met daarop uitleg over het hoe en wat al werkt diegene met andere code.
http://openam.github.io/bootstrap-responsive-tabs/
het tweede voorbeeld is naar mijn mening wat je wilt bereiken. Ik heb geprobeerd de code van dit voorbeeld getracht te combineren met jouw codering, maar dat ging niet werken. wellicht dat je hier zelf verder mee kan komen.

[eyecandy]

Bedankt voor je inzet Allerleidesign. Ik heb zelf ook geprobeerd om de code vanaf de link die je doorgaf werkend te krijgen. Bij mij werkt de responsive switch naar een accordion niet, volgens mij krijg ik de javascript call niet aan de praat. Ik heb op verschillende manieren geprobeerd om deze in te voegen maar het wil niet?
Ik denk eigenlijk ook niet dat het voor mij gaat werken omdat het voorbeeld de responsive tabs laadt in een panel, niet in een accordion. Zo'n panel is altijd zichtbaar, een accordion panel niet, dat is net het essentiële verschil...
Weet iemand nog raad met de jsFiddle die ik geplaatst heb?

[eyecandy]

Kan iemand mij hier nog verder helpen? Volgens mij is het probleem inmiddels duidelijk via de jsFiddle, maar ik heb hier eigenlijk nog geen technisch advies gehad die mij dichterbij een oplossing brengt, mits die er is. Dit is geen hobby-project dus ik kan eigenlijk niet langer testen, dan moet ik zoeken naar een alternatieve oplossing, toch hoop ik nog dat iemand hier zijn kennis wil delen.

[alwinuzz]

Ik denk dat de tabs zichtbaar moeten zijn als je tabCollapse aanroept. Anders kan hij niet kijken of de width groot genoeg is.
Workaround: opnieuw tabCollapse laten nadenken als de parent panel wordt opengeklapt: https://jsfiddle.net/a6d5yxat/9/

De jsFiddle werkt niet in Chrome:

code:

Refused to execute script from 'https://raw.githubusercontent.com/flatlogic/bootstrap-tabcollapse/master/bootstrap-tabcollapse.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

In Firefox werkt de fiddle wel.

[eyecandy]

alwinuzz schreef op dinsdag 19 april 2016 @ 19:02:
Ik denk dat de tabs zichtbaar moeten zijn als je tabCollapse aanroept. Anders kan hij niet kijken of de width groot genoeg is.
Workaround: opnieuw tabCollapse laten nadenken als de parent panel wordt opengeklapt: https://jsfiddle.net/a6d5yxat/9/

De jsFiddle werkt niet in Chrome:

code:

Refused to execute script from 'https://raw.githubusercontent.com/flatlogic/bootstrap-tabcollapse/master/bootstrap-tabcollapse.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

In Firefox werkt de fiddle wel.

Hartelijk bedankt voor de oplossing alwinuzz, dat is precies wat ik zocht, hier kan ik eindelijk weer mee vooruit.

Ik had de Fiddle niet in Chrome getest, hij had inderdaad al wat moeite met de externe tabcollapse js-file maar ik kan er geen andere bron voor vinden.