開閉アイコンが180度回転するアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

アコーディオン

開閉アイコンが180度回転するアコーディオンを作る方法

開閉アイコンが180度回転するアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しをクリックすると右側の開閉アイコンが下向きから上向きへ180度回転しながら、対応する内容を表示・非表示に切り替えます。アイコンは文字記号を使用せずCSSの2本の線で作成するため、フォントによる位置のずれを抑えながら中央へ配置できます。

閉じている状態では開閉アイコンが下向きになり、項目を開くと同じ形を保ったまま180度回転して上向きになります。再度クリックすると逆方向へ戻り、内容も閉じます。それぞれの項目は個別に開閉できるため、FAQ、お問い合わせページの商品・サービス説明、ECサイトの商品詳細、会員サイトのヘルプ、管理画面の設定項目など、情報を整理して表示したい場面で利用できます。

HTMLではタイトル、説明文、各見出し、開閉する本文を変更できます。CSSではアコーディオンの横幅や余白、背景色、角丸のほか、開閉アイコンの大きさ、線の太さ、色、180度回転するアニメーション時間を調整できます。JavaScriptではクリックした項目の開閉状態を切り替えます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できるアコーディオンとして活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

開閉アイコンが180度回転するアコーディオン

見出しをクリックすると、右側の開閉アイコンが180度回転します。

クリックした項目の内容を表示・非表示に切り替えられるUIです。

FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。

CSSで作った開閉アイコンが、項目の開閉に合わせて下向きから上向きへ180度回転します。

各見出しをクリックすると内容が開閉し、右側の開閉アイコンが180度回転する動きを確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>開閉アイコンが180度回転するアコーディオン</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="rotate-180-icon-accordion_wrap">

    <!-- タイトル -->
    <div class="rotate-180-icon-accordion_title">
      開閉アイコンが180度回転するアコーディオン
    </div>

    <!-- 説明文 -->
    <p class="rotate-180-icon-accordion_text">
      見出しをクリックすると、右側の開閉アイコンが180度回転します。
    </p>

    <!-- 1つ目の項目 -->
    <div class="rotate-180-icon-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="rotate-180-icon-accordion_button"
        type="button"
        aria-expanded="false">

        <span>アコーディオンとは？</span>

        <!-- CSSで作る開閉アイコン -->
        <span
          class="rotate-180-icon-accordion_icon"
          aria-hidden="true">
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="rotate-180-icon-accordion_content">

        <div class="rotate-180-icon-accordion_content-inner">

          <p class="rotate-180-icon-accordion_content-text">
            クリックした項目の内容を表示・非表示に切り替えられるUIです。
          </p>

        </div>

      </div>

    </div>

    <!-- 2つ目の項目 -->
    <div class="rotate-180-icon-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="rotate-180-icon-accordion_button"
        type="button"
        aria-expanded="false">

        <span>どんな場面で使う？</span>

        <!-- CSSで作る開閉アイコン -->
        <span
          class="rotate-180-icon-accordion_icon"
          aria-hidden="true">
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="rotate-180-icon-accordion_content">

        <div class="rotate-180-icon-accordion_content-inner">

          <p class="rotate-180-icon-accordion_content-text">
            FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。
          </p>

        </div>

      </div>

    </div>

    <!-- 3つ目の項目 -->
    <div class="rotate-180-icon-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="rotate-180-icon-accordion_button"
        type="button"
        aria-expanded="false">

        <span>アイコンの特徴は？</span>

        <!-- CSSで作る開閉アイコン -->
        <span
          class="rotate-180-icon-accordion_icon"
          aria-hidden="true">
        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="rotate-180-icon-accordion_content">

        <div class="rotate-180-icon-accordion_content-inner">

          <p class="rotate-180-icon-accordion_content-text">
            CSSで作った開閉アイコンが、項目の開閉に合わせて下向きから上向きへ180度回転します。
          </p>

        </div>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、見出しをクリックした時に右側のアイコンが180度回転します。回転速度を変更したい場合は、style.css 内の transition の秒数を調整してください。

こちらもおすすめ

アコーディオン
アコーディオンのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント