Accordion

Ready

HTML
View
Context
Assets
Info
Notes


        
        <main class="main-wrapper">
    <div class="accordion-wrap">
        <div class="accordion-button-box">
            <button type="button" id="all-open" class="accordion-all-button" aria-controls="panel1 panel2 panel3 panel4 panel5">すべて開く</button>
            <button type="button" disabled="true" id="all-close" class="accordion-all-button" aria-controls="panel1 panel2 panel3 panel4 panel5">すべて閉じる</button>
        </div>
        <ul class="accordion-list" role="presentation">
            <li role="presentation">
                <details id="panel1" class="accordion-details" aria-expanded="false">
                    <summary>リスト項目1</summary>
                    <div class="accordion-details__content" aria-hidden="true">
                        <p class="accordion-details__paragraph">リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1</p>
                    </div>
                </details>
            </li>
            <li role="presentation">
                <details id="panel2" class="accordion-details" aria-expanded="false">
                    <summary>リスト項目2</summary>
                    <div class="accordion-details__content" aria-hidden="true">
                        <p class="accordion-details__paragraph">リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2</p>
                    </div>
                </details>
            </li>
            <li role="presentation">
                <details id="panel3" class="accordion-details" aria-expanded="false">
                    <summary>リスト項目3</summary>
                    <div class="accordion-details__content" aria-hidden="true">
                        <p class="accordion-details__paragraph">リスト内容3リスト内容3リスト内容3リスト内容3リスト内容3リスト内容3</p>
                    </div>
                </details>
            </li>
            <li role="presentation">
                <details id="panel4" class="accordion-details" aria-expanded="false">
                    <summary>リスト項目4</summary>
                    <div class="accordion-details__content" aria-hidden="true">
                        <p class="accordion-details__paragraph">リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4</p>
                    </div>
                </details>
            </li>
            <li role="presentation">
                <details id="panel5" class="accordion-details" aria-expanded="false">
                    <summary>リスト項目5</summary>
                    <div class="accordion-details__content" aria-hidden="true">
                        <p class="accordion-details__paragraph">リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5</p>
                    </div>
                </details>
            </li>
        </ul>
    </div>
</main>


        <main class="main-wrapper">
  <div class="accordion-wrap">
    <div class="accordion-button-box">
      <button type="button" id="all-open" class="accordion-all-button" aria-controls="panel1 panel2 panel3 panel4 panel5">すべて開く</button>
      <button type="button" disabled="true" id="all-close" class="accordion-all-button" aria-controls="panel1 panel2 panel3 panel4 panel5">すべて閉じる</button>
    </div>
    <ul class="accordion-list" role="presentation">
      <li role="presentation">
        <details id="panel1" class="accordion-details" aria-expanded="false">
          <summary>リスト項目1</summary>
          <div class="accordion-details__content" aria-hidden="true">
            <p class="accordion-details__paragraph">リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1リスト内容1</p>
          </div>
        </details>
      </li>
      <li role="presentation">
        <details id="panel2" class="accordion-details" aria-expanded="false">
          <summary>リスト項目2</summary>
          <div class="accordion-details__content" aria-hidden="true">
            <p class="accordion-details__paragraph">リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2リスト内容2</p>
          </div>
        </details>
      </li>
      <li role="presentation">
        <details id="panel3" class="accordion-details" aria-expanded="false">
          <summary>リスト項目3</summary>
          <div class="accordion-details__content" aria-hidden="true">
            <p class="accordion-details__paragraph">リスト内容3リスト内容3リスト内容3リスト内容3リスト内容3リスト内容3</p>
          </div>
        </details>
      </li>
      <li role="presentation">
        <details id="panel4" class="accordion-details" aria-expanded="false">
          <summary>リスト項目4</summary>
          <div class="accordion-details__content" aria-hidden="true">
            <p class="accordion-details__paragraph">リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4リスト内容4</p>
          </div>
        </details>
      </li>
      <li role="presentation">
        <details id="panel5" class="accordion-details" aria-expanded="false">
          <summary>リスト項目5</summary>
          <div class="accordion-details__content" aria-hidden="true">
            <p class="accordion-details__paragraph">リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5リスト内容5</p>
          </div>
        </details>
      </li>
    </ul>
  </div>
</main>


        
            
            /* No context defined. */

File:

Content:


                                /* /js/modules/Accordion.js */

/**
 * Accordion UI class
 */
export class Accordion {
  constructor(el) {
    this.details = el;
    this.summary = this.details.firstElementChild;
    this.collapse = this.summary.nextElementSibling;
    this.collapseCont = this.collapse.firstElementChild;

    this.allOpen = document.getElementById('all-open');
    this.allClose = document.getElementById('all-close');
  }

  handleEvents() {
    this.handlers = {};
    this.handlers.click = this.onClick.bind(this);
    this.summary.addEventListener('click', this.handlers.click);
    this.handlers.transitionEnd = this.onTransitionEnd.bind(this);

    this.handlers.click = this.onAllOpen.bind(this);
    this.allOpen.addEventListener('click', this.handlers.click);

    this.handlers.click = this.onAllClose.bind(this);
    this.allClose.addEventListener('click', this.handlers.click);

    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.onResize();
      }, 50);
    });
  }

  onClick(e) {
    if (this.details.open) {
      this.collapse.style.height = '';
      this.collapse.addEventListener('transitionend', this.handlers.transitionEnd);

      this.details.setAttribute('aria-expanded', 'false');
      this.collapse.setAttribute('aria-hidden', 'true');
    } else {
      this.details.open = true;
      this.collapse.style.height = this.collapseCont.offsetHeight / 16 + 'rem';

      this.details.setAttribute('aria-expanded', 'true');
      this.collapse.setAttribute('aria-hidden', 'false');

      this.allClose.classList.remove('is-disabled');
    }
    e.preventDefault();
  }

  onTransitionEnd() {
    this.collapse.removeEventListener('transitionend', this.handlers.transitionEnd);
    this.details.open = false;
    this.allOpen.classList.remove('is-disabled');
  }

  onAllOpen() {
    if (!this.details.open) {
      this.details.open = true;
      this.allOpen.setAttribute('disabled', 'true');
      this.allClose.removeAttribute('disabled');
      this.collapse.style.height = this.collapseCont.offsetHeight / 16 + 'rem';
      this.details.setAttribute('aria-expanded', 'true');
      this.collapse.setAttribute('aria-hidden', 'false');
    }
  }

  onAllClose() {
    if (this.details.open) {
      this.allClose.setAttribute('disabled', 'true');
      this.allOpen.removeAttribute('disabled');
      this.collapse.style.height = '';
      this.collapse.addEventListener('transitionend', this.handlers.transitionEnd);
      this.details.setAttribute('aria-expanded', 'false');
      this.collapse.setAttribute('aria-hidden', 'true');
    }
  }

  onResize() {
    if (this.details.open) {
      this.collapse.style.height = this.collapseCont.offsetHeight / 16 + 'rem';
    }
  }
}

/* /js/main.js */

import { Accordion } from './modules/Accordion.js';

document.addEventListener('DOMContentLoaded', () => {
  const detailsEls = document.getElementsByTagName('details');

  for (let i = 0; i < detailsEls.length; i++) {
    const accordion = new Accordion(detailsEls[i]);
    accordion.handleEvents();

    // アコーディオンリストopen状態のDOM監視およびclass付け替え・要リファクタ
    if (detailsEls) {
      const allOpen = document.getElementById('all-open');
      const allClose = document.getElementById('all-close');
      const observer = new MutationObserver(records => {
        if (detailsEls[0].open === true && detailsEls[1].open === true && detailsEls[2].open === true && detailsEls[3].open === true && detailsEls[4].open === true) {
          allOpen.setAttribute('disabled', 'true');
        } else {
          allOpen.removeAttribute('disabled');
        }

        if (detailsEls[0].open === false && detailsEls[1].open === false && detailsEls[2].open === false && detailsEls[3].open === false && detailsEls[4].open === false) {
          allClose.setAttribute('disabled', 'true');
        } else {
          allClose.removeAttribute('disabled');
        }
      })
      observer.observe(detailsEls[i], {
        attributes: true,
        attributeFilter: ['open'],
      })
    }
  }
});

URL: /components/raw/accordion/index.js
Filesystem Path: src/components/2-dynamic-ui/accordion/index.js
Size: 4.1 KB

Content:


                                .accordion-wrap {
  width: 100%;
  margin: auto;
}
@media print, screen and (min-width:48em) {
  .accordion-wrap {
    max-width: 50rem;
  }
}

.accordion-button-box {
  display: flex;
  margin: auto auto 1.5rem;
}
@media print, screen and (max-width:64em) {
  .accordion-button-box {
    justify-content: center;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-button-box {
    justify-content: flex-end;
  }
}

.accordion-all-button {
  border: 1px solid var(--black);
  border-radius: 5px;
}
@media print, screen and (max-width:64em) {
  .accordion-all-button {
    width: 43%;
    padding: 1rem .5rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-all-button {
    min-width: 8.5rem;
    padding: 1rem;
    transition: var(--out-transition);
  }
  .accordion-all-button:hover, .accordion-all-button:focus {
    background-color: var(--black);
    color: var(--white);
    transition: var(--in-transition);
  }
}
@media print, screen and (max-width:64em) {
  .accordion-all-button:not(:first-of-type) {
    margin-left: 1rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-all-button:not(:first-of-type) {
    margin-left: 1.75rem;
  }
}
.accordion-all-button[disabled="true"] {
  border: none;
  color: #666;
  box-shadow: 1px 1px 3px 2px hsla(0, 0%, 0%, .3) inset;
  cursor: not-allowed;
}
.accordion-all-button[disabled="true"]:hover, .accordion-all-button[disabled="true"]:focus {
  background-color: var(--white);
  color: #666;
  box-shadow: 1px 1px 3px 2px hsla(0, 0%, 0%, .3) inset;
}

.accordion-list > li {
  background-color: #d9d9d9;
  color: var(--black);
}
.accordion-list > li:not(:last-of-type) {
  margin-bottom: .25rem;
}

.accordion-details {
  height: auto;
}
@media print, screen and (max-width:64em) {
  .accordion-details {
    font-size: 1rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-details {
    font-size: 1.1rem;
  }
}
.accordion-details > summary {
  padding: 1.5rem;
  cursor: pointer;
}
@media print, screen and (max-width:64em) {
  .accordion-details > summary {
    padding: 1rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-details > summary {
    padding: 1.5rem;
  }
  .accordion-details > summary:hover, .accordion-details > summary:focus {
    padding: 1.4375rem;
    border: .0625rem solid var(--black);
    font-weight: bold;
  }
}
@media print, screen and (max-width:64em) {
  .accordion-details > summary:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 6.5px transparent solid;
    border-right: 0 transparent solid;
    border-bottom: 6.5px transparent solid;
    border-left: 11px var(--black) solid;
    border-style: solid;
    transition: transform cubic-bezier(.215, .61, .355, 1) .15s, border-color cubic-bezier(.215, .61, .355, 1) .15s;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-details > summary:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7.5px transparent solid;
    border-right: 0 transparent solid;
    border-bottom: 7.5px transparent solid;
    border-left: 13px var(--black) solid;
    border-style: solid;
    transition: transform cubic-bezier(.215, .61, .355, 1) .15s, border-color cubic-bezier(.215, .61, .355, 1) .15s;
  }
}
.accordion-details > summary::marker {
  font-size: 0;
}
.accordion-details > summary::-webkit-details-marker {
  font-size: 0;
}
.accordion-details > summary:before {
  display: inline-block;
  width: auto;
  margin-right: 1rem;
  transition: transform .25s var(--ease-out-quad);
}
.accordion-details[aria-expanded="true"] > summary:before {
  transform: rotate(90deg);
  transition-timing-function: var(--ease-out-quad);
}

.accordion-details__content {
  height: 0;
  background-color: #e6e6e6;
  color: var(--black);
  overflow: hidden;
  transition: height .25s var(--ease-out-quad);
  pointer-events: none;
}
[open] .accordion-details__content {
  transition-timing-function: var(--ease-out-quad);
}

.accordion-details__paragraph {
  border-top: .0625rem solid #b3b3b3;
}
@media print, screen and (max-width:64em) {
  .accordion-details__paragraph {
    padding: 1rem;
  }
}
@media print, screen and (min-width:64.0625em) {
  .accordion-details__paragraph {
    padding: 1.5rem;
  }
}

URL: /components/raw/accordion/style.css
Filesystem Path: src/components/2-dynamic-ui/accordion/style.css
Size: 4.3 KB

Handle: @accordion
Preview:
- With layout
- Component only
Filesystem Path: src/components/2-dynamic-ui/accordion/accordion.hbs

No notes defined.