Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapse Accordion is still using Panels #18375

Closed
adamreed90 opened this issue Nov 29, 2015 · 12 comments
Closed

Collapse Accordion is still using Panels #18375

adamreed90 opened this issue Nov 29, 2015 · 12 comments
Labels
confirmed docs js v4
Milestone
v4.0.0-alpha.5

Comments

@adamreed90
Copy link

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?
@Johann-S
Copy link
Member

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

@cvrebert
Copy link
Collaborator

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

Collapse

@cvrebert cvrebert changed the title Collapse is using Panels Collapse Accordion is still using Panels Nov 29, 2015
@adamreed90
Copy link
Author

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

@twbs-lmvtfy
Copy link

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.)

@cvrebert
Copy link
Collaborator

The JavaScript for the accordion feature currently still assumes the usage of Panels; see

bootstrap/js/src/collapse.js

Line 59 in c2cf58b

ACTIVES : '.panel > .in, .panel > .collapsing',

@Johann-S Johann-S mentioned this issue Dec 1, 2015
Merged
This was referenced Dec 23, 2015
Closed
Closed
@kkirsche kkirsche mentioned this issue Feb 19, 2016
Merged
@atu-record
Copy link

atu-record commented May 9, 2016 •
edited
Loading

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

@timalbert
Copy link

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

@Starsam80 Starsam80 mentioned this issue Aug 8, 2016
Closed
@ChrisMBarr
Copy link
Contributor

ChrisMBarr commented Aug 21, 2016 •
edited
Loading

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'

@ve3
Copy link

ve3 commented Sep 27, 2016

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.

@mdo mdo added this to the v4.0.0-alpha.5 milestone Oct 11, 2016
@mdo
Copy link
Member

mdo commented Oct 11, 2016

#18400 was merged to address this.

@mdo mdo closed this as completed Oct 11, 2016
@martpie
Copy link

martpie commented Jan 18, 2017 •
edited
Loading

I did not want to open a new issue, but about @timalbert 's quote

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

Any reason why the accordion is card-dependent ?

@Johann-S
Copy link
Member

IMO it's an historical dependency because on V3 accordion depend on panel which was transformed to card in V4.

But see this : #17021 and you'll find that accordion won't depend on card at the end of the V4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed docs js v4
Projects
None yet
Milestone
v4.0.0-alpha.5
Development

No branches or pull requests
10 participants
@mdo @timalbert @cvrebert @ChrisMBarr @martpie @ve3 @Johann-S @twbs-lmvtfy @adamreed90 @atu-record