pf-accordion development

[priley86]

We'd like to implement a pf-accordion and associated custom elements which have the same look and feel as our Accordion widget. The DOM API should look something like this:

 <pf-accordion id="myAccordion" role="tablist" aria-multiselectable="true">
  <pf-accordion-panel>
    <pf-accordion-heading role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </pf-accordion-heading>
    <pf-accordion-template id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <pf-accordion-body>
        Collapse CONTENT 1
      </pf-accordion-body>
    </pf-accordion-template>
  </pf-accordion-panel>
  <pf-accordion-panel>
    <pf-accordion-heading role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </pf-accordion-heading>
    <pf-accordion-template id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
     <pf-accordion-body>
        Collapse CONTENT 2
      </pf-accordion-body>
    </pf-accordion-template>
  </pf-accordion-panel>
  <pf-accordion-panel>
    <pf-accordion-heading role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </pf-accordion-heading>
    <pf-accordion-template id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <pf-accordion-body>
        Collapse CONTENT 3
      </pf-accordion-body>
    </pf-accordion-template>
  </pf-accordion-panel>
</pf-accordion>  

The JS API should mimic the Bootstrap Collapse API here.

[recrsn]

Hi,
I have been writing this component since last week.

Does the a tag in the pf-accordion-header component must always have the data-toggle="collapse" etc ?

[priley86]

It looks like the Bootstrap js is using data-toggle=collapse as a way of selecting any element which can trigger the collapse (so in some cases this may be a button or an a element)… this would be an easy way to select the trigger element and would be more consistent with Bootstrap JS… as always, i try to read the Bootstrap APIs closely when implementing a custom element and match as closely as possible. These examples may help too:
http://getbootstrap.com/javascript/#collapse
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js