スタイルガイド

アコーディオン 

<dl class="accordion-panel">
    <dt><a href="#acc1">1</a></dt>
    <dd id="acc1" class="current">
        <div>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
    </dd>
    <dt><a href="#acc2">2</a></dt>
    <dd id="acc2">
        <div>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
    </dd>
    <dt><a href="#acc3">3</a></dt>
    <dd id="acc3">
        <div>テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
    </dd>
    <dt><a href="#acc4">4</a></dt>
    <dd id="acc4">
        <div>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
    </dd>
</dl>
  • Content: 
    .accordion-panel {
  display: flex;
  height: 300px;
}

.accordion-panel dt {
  padding: 12px;
  background: #333;
}

.accordion-panel dt > a {
  display: block;
  height: 100%;
  color: #fff;
}

.accordion-panel dd {
  width: 0;
  height: 100%;
  background: #555;
  color: #fff;
  overflow: hidden;
  transition: width 0.3s;
}

.accordion-panel dd.current {
  width: 100%;
}

.accordion-panel dd > div {
  padding: 12px;
}
  • URL: /components/raw/accordion/accordion.css
  • Filesystem Path: src\components\11-accordion\accordion.css
  • Size: 457 Bytes
  • Content: 
    .accordion-panel {
  display: flex;
  height: 300px;
  & dt {
    padding: $space_md;
    background: $color_main;
    & > a {
      display: block;
      height: 100%;
      color: $color_opposite;
    }
  }
  & dd {
    width: 0;
    height: 100%;
    background: $color_sub;
    color: $color_opposite;
    overflow: hidden;
    transition: width $speed_fast;
    &.current {
      width: 100%;
    }
    & > div {
      padding: $space_md;
    }
  }
}
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src\components\11-accordion\accordion.scss
  • Size: 483 Bytes
  • Content: 
    (function() {
  const accordionBtns = document.querySelectorAll('.accordion-panel a');
  if(!accordionBtns) {return;}
  accordionBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      accordionChange(btn);
    });
  });

  function accordionChange(btn) {
    const currentBtn = document.querySelector('.current');
    currentBtn.classList.remove('current');
    const nextBtn = document.querySelector(btn.getAttribute('href'));
    nextBtn.classList.add('current');
  }
}());
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: src\components\11-accordion\accordion.js
  • Size: 535 Bytes