超簡単！ CSSだけで作る高さ可変なアコーディオン

Web Create
2016.11.16

CSSだけで高さ可変のアコーディオンを作る方法をご紹介します。
高さが可変なのでjQueryの slideToggle() などを使わなくても大丈夫なんです。

ひとつが開くとほかが閉じるタイプと、開いたままのタイプ、2パターン作ります。
といってもクリック判定をチェックボックスで行うか、ラジオボタンで行うかの違いです。

inputがチェックされているかどうかを、:checked で判定し、
隣接セレクタ + でチェックされたinputの後の要素を表示します。
（ところで、直前の要素を選択する – もあればいいのに…）

CSSアコーディオンタイプ1（開いたまま）

まずは開いたままのタイプです。デモをご覧ください。

See the Pen CSS-Accordion by leo (@leo-trym) on CodePen.

HTML

<div class="ly_accordion">
 
  <article class="bl_box">
    <label for="rta01" class="el_heading">title1</label>
    <input id="rta01" class="el_checkbox" type="checkbox">
    <div class="bl_content" title="title1">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta02" class="el_heading">title2</label>
    <input id="rta02" class="el_checkbox" type="checkbox">
    <div class="bl_content">
      <div class="bl_inner">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta03" class="el_heading">title3</label>
    <input id="rta03" class="el_checkbox" type="checkbox">
    <div class="bl_content" title="title3">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta04" class="el_heading">title4</label>
    <input id="rta04" class="el_checkbox" type="checkbox">
    <div class="bl_content" title="title4">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta05" class="el_heading">title5</label>
    <input id="rta05" class="el_checkbox" type="checkbox">
    <div class="bl_content" title="title5">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation</p>
      </div>
    </div>
  </article>
 
</div>

CSS

.ly_accordion {
  border: 1px solid #000;
  border-bottom: 0;
}

.ly_accordion .bl_inner {
  padding: 0 1em;
  border-bottom: 1px solid #000;
}

.ly_accordion .el_heading {
  display: block;
  margin: 0;
  padding: .5em;
  color: #000;
  border-bottom: 1px solid #000;
  background: #d5d5d5;
}

.ly_accordion .bl_content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s ease-out 0s;
}

.ly_accordion .el_checkbox {
  display: none;
}

.ly_accordion .el_checkbox:checked + .bl_content {
  max-height: 9999px;
  transition: max-height 1s ease-in;
}

CSSアコーディオンタイプ2（ほかが閉じる）

続いて、他が閉じるタイプです。

See the Pen CSS-Accordion-radio by leo (@leo-trym) on CodePen.

HTML

<div class="ly_accordion">
 
  <article class="bl_box">
    <label for="rta01" class="el_heading">title1</label>
    <input id="rta01" class="el_radio" type="radio" name="accordion">
    <div class="bl_content" title="title1">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta02" class="el_heading">title2</label>
    <input id="rta02" class="el_radio" type="radio" name="accordion">
    <div class="bl_content">
      <div class="bl_inner">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta03" class="el_heading">title3</label>
    <input id="rta03" class="el_radio" type="radio" name="accordion">
    <div class="bl_content" title="title3">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta04" class="el_heading">title4</label>
    <input id="rta04" class="el_radio" type="radio" name="accordion">
    <div class="bl_content" title="title4">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan</p>
      </div>
    </div>
  </article>
 
  <article class="bl_box">
    <label for="rta05" class="el_heading">title5</label>
    <input id="rta05" class="el_radio" type="radio" name="accordion">
    <div class="bl_content" title="title5">
      <div class="bl_inner">
        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation</p>
      </div>
    </div>
  </article>
 
</div>

CSS

.ly_accordion {
  border: 1px solid #000;
  border-bottom: 0;
}
.ly_accordion .bl_inner {
  padding: 0 1em;
  border-bottom: 1px solid #000;
}
.ly_accordion .el_heading {
  display: block;
  margin: 0;
  padding: .5em;
  color: #000;
  border-bottom: 1px solid #000;
  background: #d5d5d5;
}
.ly_accordion .bl_content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease-out;
}
.ly_accordion .el_radio {
  display: none;
}
.ly_accordion .el_radio:checked + .bl_content {
  max-height: 9999px;
  transition: max-height 1s ease-in;
}

解説

クリックの判定

上記、2パターンはHTML、CSSともにほとんど変わっていません。
最初にも書きましたように、クリック判定をチェックボックスで行うか、
ラジオボタンで行うかの違いです。

クリック判定の仕方としては、ほかに<a>タグの疑似要素 :target を使うことも可能ですが、
それだとページ内でスクロールが発生してしまいます。

高さが可変な秘密

初めクリック後のアニメーションを下記のように指定していたのですが、

height: 0 → height: 200px;

これだと200pxまでで止まってしまい、中身が増えた時に対応できません。
しかし height: auto; ではアニメーションしてくれないんです。

そこで、max-height を代わりに使いました。

max-height: 0 → max-height: 9999px;

とすることで、中身が増えても大丈夫なんです。

まとめ

今回ご紹介した高さ可変テクニックを使うと、
CSSだけでドロップダウンメニュやメガメニューを作ることもできます。
それに関しては、また別の機会にご紹介したいと思います。

なお、ウィンドウサイズでタブとアコーディオンを切り替える方法もご紹介してます。

【レスポンシブ】CSSだけで作る！ウィンドウサイズで切り替わるタブ・アコーディオン

【WordPress】複雑なループでもシンプルに書こう 〜IF文 地獄にならないために〜

【Movable Type】編集画面でタイトルの文字数カウント

【Movable Type】IF文不要！カテゴリ毎にレイアウトを変える

【MovableType】大量にカスタムフィールドがあるテンプレートをスマートにする書き方

【重要！】WordPress 4.7.1に深刻な脆弱性 コンテンツが改ざんされるとこうなる

韓国モール型ECサイト「29CM」コンテンツ内のクレジットの見せ方

韓国モール型ECサイト「SEOUL STORE.」のUI/UX（後編）

韓国モール型ECサイト「SEOUL STORE.」のUI/UX（前編）

韓国最大規模 モール型ECサイト「MUSINSA」のUI/UX（後編）

韓国最大規模 モール型ECサイト「MUSINSA」のUI/UX（前編）

リテールメディアとは？Web制作会社が提案する新たな広告戦略

GA無料診断キャンペーン実施のお知らせ

マーケティングオートメーションの基礎知識 Vol.02

マーケティングオートメーションの基礎知識 Vol.01

Webマーケティングの基礎知識

新型肺炎の影響による在庫状況に関して

【ご挨拶】ノベルティ本舗

Webマーケティングに強みをおいている会社のご紹介

Webデザインに強みをおいている会社のご紹介

【報告】4ヶ月でPHP Laravelを学べる学校を開校いたしました！

半期報告会を行いました！

Adobe Fireflyベータ版を使ってみた感想

細かいUIの参考になるアプリ5選

【Shopify】ディスカウントの設定方法

アパレルECサイトにおけるリターゲティング広告の効果的な活用法

ゼロトラストアーキテクチャ入門：基礎から最新トレンドまでセキュリティ強化のための新常識

デジタルヘルスケアとは？主な要素と最新トレンドを解説

DXとは？IT化やAI活用との違いとメリット・デメリットを徹底解説

【業界別】ウェブアクセシビリティ対応状況比較

超簡単！ CSSだけで作る高さ可変なアコーディオン

CSSアコーディオン タイプ1（開いたまま）

HTML

CSS

CSSアコーディオン タイプ2（ほかが閉じる）

HTML

CSS

解説

クリックの判定

高さが可変な秘密

まとめ

Contact

【WordPress】複雑なループでもシンプルに書こう〜IF文地獄にならないために〜

【重要！】WordPress 4.7.1に深刻な脆弱性コンテンツが改ざんされるとこうなる

韓国最大規模モール型ECサイト「MUSINSA」のUI/UX（後編）

韓国最大規模モール型ECサイト「MUSINSA」のUI/UX（前編）

CSSアコーディオンタイプ1（開いたまま）

CSSアコーディオンタイプ2（ほかが閉じる）