Accordion Component

City of Toronto Web Design System

Example/ Demo:

https://cityoftoronto.github.io/COT_UI/examples/Accordion.html

Configuration Options:

You can set the heading level of the Accordion Titles

You can set the general title of the Accordion

There are 3 main methods available:

collapseSectionById('title-of-the-accordion-section', true /*Optional ignore animation (default: false)*/);
expandSectionById('title-of-the-accordion-section');
expandAll();
collapseAll();

There are 2 event listeners available fired on every action:

hide-accordion-section
show-accordion-section

Javascript

HTML

<div id="js-cotui-app"></div>
<div id="js-cotui-accordion-list-template" data-template>
    <div class="accordion__section">
        <div class="accordion__header">
            <h2>
            <button class="accordion__button" data-type="toggle" aria-controls="{{ID}}" aria-expanded="false"></button>
            </h2>
        </div>

        <div id="{{ID}}">
            {{BODY}}
        </div>
    </div>
</div>

Javascript

<script>
      document.onreadystatechange = function () {
          if (document.readyState == "interactive") {
            var ui = new COTUI();
            var ac = ui.Accordion({
              target:'#js-cotui-app',                        // '#js-cotui-app'
              template: '#js-cotui-accordion-list-template', // Optional ('#js-cotui-accordion-list-template') || document.createElement('template')
              level: 2,                                      // Optional (default: <h3 />)
              attrs:['cotui'],                               // Optional
              sections:[
                { title:'Section 1', body: document.createElement('div'), expanded: true },
                { title:'Section 2', body:'This is the 2 section body', expanded: false },
                { title:'Section 3', body:'This is the 3 section body', expanded: false },
                { title:'Section 4', body:'This is the 4 section body', expanded: false }
              ]
            });

            ac.collapseSectionById(
              'section-1', 
              true, // Optional ignore animation (default: false)
            );

            ac.expandSectionById('section-3');

            ac.expandAll();
            ac.collapseAll();

            ac.addEventListener('hide-accordion-section',(evt)=>{});
            ac.addEventListener('show-accordion-section',(evt)=>{});
          }
      }
    </script>

Custom Element Definition

Javascript

<script>
	const ui = new COTUI()
</script>

HTML

<div is="cotui-accordion" title="A group of accordions" data-level="2" data-button-expand="btn btn-link" data-button-collapse="btn btn-link" data-allow-multiple>
  <section>
    <button data-type="toggle" aria-controls="ID-0" aria-expanded="true">
      0:Accordion Title
    </button>
    <div id="ID-0">
      <p>Content for 0:Accordion Title goes here</p>
    </div>
  </section>

  <section>
    <button data-type="toggle" aria-controls="ID-1" aria-expanded="false">
      1:Accordion Title
    </button>
    <div id="ID-1">
      <p>Content for 1:Accordion Title goes here</p>
    </div>
  </section>
</div>