Bootstrap: Collapse Accordion is still using Panels

Created on 29 Nov 2015 · 12Comments · Source: twbs/bootstrap

Per the blog post for v4, Panels were to be removed and swapped for Cards?

http://v4-alpha.getbootstrap.com/components/collapse/

The example is using Panels?

confirmed docs js v4

Source

adamreed90

Most helpful comment

Would be nice if accordion wasn't dependent on a component (ie. cards) and was just able to collapse/expand based on data-parent.

timalbert on 22 Jul 2016

👍6 ❤2

All 12 comments

You're right the accordion example still using panels
http://v4-alpha.getbootstrap.com/components/collapse/#accordion-example

Johann-S on 29 Nov 2015

This is related to an open TODO item for v4 (#17021):

Collapse

[ ] Make accordion feature of collapse plugin independent of panels?: twbs/bootstrap#10966

cvrebert on 29 Nov 2015

I have tested v4 using Cards and this seems to function as expected, I do believe simply updating the documentation may be sufficient?

Ex:
http://pastebin.com/Qruir6wj

Produces:
2vimirpa

adamreed90 on 30 Nov 2015

Hi @adamreed90!

You appear to have posted a live example (http://pastebin.com/Qruir6wj), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 1, column 1 thru column 65: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 30 Nov 2015

The JavaScript for the accordion feature currently still assumes the usage of Panels; see https://github.com/twbs/bootstrap/blob/c2cf58b4a0abb66689d5f5174842562c26a6e898/js/src/collapse.js#L59

cvrebert on 30 Nov 2015

any plans to change that soon?
I think this should be added to milestones...

atu-record on 9 May 2016

Would be nice if accordion wasn't dependent on a component (ie. cards) and was just able to collapse/expand based on data-parent.

timalbert on 22 Jul 2016

👍6 ❤2

I see this in collapse.js where it specifically is looking for the .panel selector.

  const Selector = {
    ACTIVES     : '.panel > .in, .panel > .collapsing',
    DATA_TOGGLE : '[data-toggle="collapse"]'
  }

In my very brief testing I changed that to ACTIVES: '.collapse.in, .collapse.collapsing' which seems to work just fine.

And I suppose to make better use of the variables that could be better written as:
ACTIVES: '.' + ClassName.COLLAPSE + '.in, .' + ClassName.COLLAPSE + '.collapsing'

chrismbarr on 21 Aug 2016

👍2

https://gist.github.com/ve3/06e276d566079f102d331f0ed398d5fa

<div id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel card">
        <div class="panel-heading card-header" role="tab" id="accordion2-heading1">
            <a href="#accordion2-collapse1" data-toggle="collapse" data-parent="#accordion2" aria-expanded="true" aria-controls="accordion2-collapse1">Collapsible Group Item #1</a>
        </div>
        <div id="accordion2-collapse1" class="card-block panel-collapse collapse in" role="tabpanel" aria-labelledby="accordion2-heading1">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
    <div class="panel card">
        <div class="panel-heading card-header" role="tab" id="accordion2-heading2">
            <a class="collapsed" href="#accordion2-collapse2" data-toggle="collapse" data-parent="#accordion2" aria-expanded="false" aria-controls="accordion2-collapse2">รายการกลุ่มที่ย่อได้ #2</a>
        </div>
        <div id="accordion2-collapse2" class="card-block panel-collapse collapse" role="tabpanel" aria-labelledby="accordion2-heading2">
            อุรังคธาตุแซลมอนเจลซูฮกคาร์โก้เพทนาการ วัคค์ออร์เดอร์สเตเดียมสี่แยกโลชั่น จตุคามมาเฟียธุหร่ำ บ๋อยซาบะซาร์ดีนเมคอัพแบ็กโฮพรีเซ็นเตอร์ธุรกรรม บรรพชนคณาญาติอ่วม บู๊สหรัฐมาร์จินไหร่ ไหร่ซิลเวอร์เฟรชเหมยกรีนโรแมนติกจังโก้ คาแร็คเตอร์เจ็ตคอรัปชั่นวาซาบิ เพียวคอร์ส ลิสต์โอยัวะ กระดี๊กระด๊าปอดแหกจุ๊ยฟยอร์ดควีน จิ๊กซอว์ฟอยล์เปปเปอร์มินต์สึนามิเบิร์น ติวเทคโนแครตกระดี๊กระด๊าโคโยตีสเกตช์เป็นไง ติ่มซำโต๊ะจีนป๋าฮัลโลวีน ศิลปากรทัวร์นาเมนท์ก่อนหน้าอัลมอนด์ศิรินทร์ซังเต คาราโอเกะคัตเอาต์คันธาระแต๋ว แอลมอนด์จ๊าบ แฟนตาซีซาดิสต์โบรชัวร์สเตชันเซอร์ไพรส์โหลยโท่ย เกย์นิวส์กรุ๊ป ฟรุตด็อกเตอร์เคอร์ฟิว ฮาลาลแคร็กเกอร์ อัลบัมโซนี่ปัจเจกชน.
        </div>
    </div>
    <div class="panel card">
        <div class="panel-heading card-header" role="tab" id="accordion2-heading3">
            <a class="collapsed" href="#accordion2-collapse3" data-toggle="collapse" data-parent="#accordion2" aria-expanded="false" aria-controls="accordion2-collapse3">Collapsible Group Item #3</a>
        </div>
        <div id="accordion2-collapse3" class="card-block panel-collapse collapse" role="tabpanel" aria-labelledby="accordion2-heading3">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

Use this while waiting for the fix. I hope it help.