Detach accordions from .card

[moso]

I'm having some fun with v4 alpha 6, however, is there a specific reason why the collapse groups, aka accordions, are hooked up on .cards?

Ideally, I would be able to make my own collapse grouping like this (simplified, but you will get my idea):

<div id="accordion">
  <h3>
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Item One
    </a>
  </h3>
  <div id="collapseOne" class="collapse show">
    <ul class="list-unstyled">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>

  <h3>
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Item Two
    </a>
  </h3>
  <div id="collapseTwo" class="collapse">
    <ul class="list-unstyled">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>

  [...]

</div>

This would allow us to use collapse groupings on other than cards. The same thing was an annoying issue with 3.x where they are hooked up on panels.

[mdo]

I'd be open to seeing this improved for v4 if we can muster it ahead of the next beta. It'd mean changing our JS and adding some additional styles, docs, examples, etc to do it right. At the very least we could add a second set of selectors there?

In the mean time, I think you can change the selectors and classes in our JS to work for things other than the cards.

/cc @bardiharborow and @Johann-S for ideas

[Johann-S]

Maybe it's possible to get rid of Collapse's selectors by adding attributs.
For exemple :

• data-children allow to find the specific children of the Collapsible element. (data-children=".card")
• data-parent allow to specify the root element of a collapsible element and will allow to have only one child active. (data-parent="true")

And we will have a Collapse plugin more flexible than now.

If you want @mdo or @bardiharborow I can make a draft

[mdo]

I can dig that approach @Johann-S. Those attributes would be separate from the card CSS, but about the transitions/collapse CSS? https://github.com/twbs/bootstrap/blob/v4-dev/scss/_transitions.scss#L10-L35. Does anything need to change there, too?

[Johann-S]

IMO nothing will change on those files but it's a bit hard to estimate without a draft.
I'll work on a draft and I'll give you feedbacks

[moso]

I dont' see how the CSS could be affected either. The collapse part (with transitions) works fine with my example in the original post. The only thing that needs rework is the data-parent-part is specifically set to work on .card. I'll happily wait to see the draft from @Johann-S

[Johann-S]

This is my draft : http://codepen.io/Johann-S/pen/jBVNXr

I kept the card selector (.card > .show, .card > .collapsing) if users want to use it, but I allow the use of other selectors by adding data-children to the div #accordion

EDIT :
This is my HTML, I can create my PR if you want @mdo

And my changes : https://github.com/Johann-S/bootstrap/commit/099486f294e79bfe1f2c6b431ee4696237f616cd

<div id="accordion2" data-children=".itemAccordion">
  <div class="itemAccordion">
    <h3>
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
        Item One
      </a>
    </h3>
    <div id="collapseOne2" class="collapse show">
      <ul class="list-unstyled">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
  <div class="itemAccordion">
    <h3>
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
        Item Two
      </a>
    </h3>
    <div id="collapseTwo2" class="collapse">
      <ul class="list-unstyled">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
</div>

[mdo]

Nice! That's awesome. I'd love to see a PR for this :).

Do we need any additional tests? I can provide on updates to the docs for examples and code snippets whenever you're ready :).

[Johann-S]

I'll do it tomorrow 👍 and yes I'll add some unit tests

And if you're motivated for doing the documentation it's ok for me 🤣