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.

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

Collapse Accordion is still using Panels #18375

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

Comments

Projects
None yet
10 participants
@adamreed90

adamreed90 commented Nov 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@Johann-S

Johann-S Nov 29, 2015

Member

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

Member

Johann-S commented Nov 29, 2015

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

@cvrebert cvrebert added docs js v4 labels Nov 29, 2015

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Nov 29, 2015

Member

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

Collapse

Member

cvrebert commented Nov 29, 2015

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

Collapse

@cvrebert cvrebert added the confirmed label Nov 29, 2015

@cvrebert cvrebert changed the title from Collapse is using Panels to Collapse Accordion is still using Panels Nov 29, 2015

@adamreed90

This comment has been minimized.

Show comment
Hide comment
@adamreed90

adamreed90 Nov 30, 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 commented Nov 30, 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

@twbs-lmvtfy

This comment has been minimized.

Show comment
Hide comment
@twbs-lmvtfy

twbs-lmvtfy Nov 30, 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 commented Nov 30, 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.)

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Nov 30, 2015

Member

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

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

Member

cvrebert commented Nov 30, 2015

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

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

@atu-record

This comment has been minimized.

Show comment
Hide comment
@atu-record

atu-record May 9, 2016

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

atu-record commented May 9, 2016

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

@timalbert

This comment has been minimized.

Show comment
Hide comment
@timalbert

timalbert Jul 22, 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 commented Jul 22, 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.

@chrismbarr

This comment has been minimized.

Show comment
Hide comment
@chrismbarr

chrismbarr Aug 21, 2016

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 commented Aug 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ve3

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

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 11, 2016

Member

#18400 was merged to address this.

Member

mdo commented Oct 11, 2016

#18400 was merged to address this.

@mdo mdo closed this Oct 11, 2016

@martpie

This comment has been minimized.

Show comment
Hide comment
@martpie

martpie Jan 18, 2017

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 ?

martpie commented Jan 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Johann-S

Johann-S Jan 18, 2017

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

Member

Johann-S commented Jan 18, 2017

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