指定時間後に自動で開閉するアコーディオンの作り方

アコーディオン
2026.08.16
無料ツール
アコーディオンを自由に作成

見出し・内容・開閉方法・色・サイズ・アイコンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

アコーディオン作成ツールを使う
新しいタブで開きます

指定時間後に自動で開閉するアコーディオンは、ページを開いてから一定時間が経過すると、クリック操作をしなくても内容が自動的に表示されたり、閉じられたりする仕組みです。例えば、3秒に設定した場合は、ページを開いてから約3秒後にアコーディオンが自動で開閉します。通常のアコーディオンと同じように、手動で開閉することもできます。

今回は、3つのアコーディオンが3秒後にすべて開くパターンと、開いた状態から3秒後にすべて閉じるパターンを紹介します。自動で開く場合は、最初は閉じた状態で表示され、指定時間が経過すると3つの内容がまとめて表示されます。自動で閉じる場合は、最初から3つの内容が表示されており、指定時間が経過するとまとめて閉じられます。

自動開閉までの時間は変更でき、3秒後だけでなく、5秒後や10秒後などにも設定できます。また、すべてのアコーディオンをまとめて開閉するだけでなく、特定の項目だけを指定して操作することも可能です。例えば、3つの項目のうち2番目だけを自動で閉じるといった動作にも対応できます。

デモ

指定時間後に自動で開閉するアコーディオン

このデモでは、指定した時間が経過すると自動で開くアコーディオンと、自動で閉じるアコーディオンの動作を確認できます。

「自動で開く」「自動で閉じる」のタブを選択すると、それぞれの動作が開始されます。どちらも3秒後に動作します。

タブを切り替えるたびにデモが初期化されるため、何度でも動作を確認できます。

Q 他のアイコンを使いたい場合はどうするの？
A

無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。

  1. SVGアイコン作成ツールを使う

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

「指定時間後に開く」「指定時間後に閉じる」のタブを切り替えると、それぞれのサンプルコードが表示されます。必要なコードをコピーするか、ZIPファイルをダウンロードしてご利用ください。 

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

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

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

  <!-- ページタイトル -->
  <title>指定時間後に自動で開くアコーディオン</title>

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

  <!-- JavaScriptファイル -->
  <script src="script.js" defer></script>

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="auto-toggle-accordion_open" id="auto-toggle-accordion-open">

    <!-- 1つ目の項目 -->
    <div class="auto-toggle-accordion_open-item">

      <!-- 開閉ボタン -->
      <button class="auto-toggle-accordion_open-button" type="button" aria-expanded="false" aria-controls="auto-toggle-accordion-open-panel-1">

        <!-- 見出し -->
        <span class="auto-toggle-accordion_open-label">見出し1</span>

        <!-- 開閉アイコン -->
        <span class="auto-toggle-accordion_open-icon" aria-hidden="true">

          <!-- 閉じているときのプラスアイコン -->
          <span class="auto-toggle-accordion_open-icon-closed">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 4v16 M4 12h16"/>
            </svg>
          </span>

          <!-- 開いているときのマイナスアイコン -->
          <span class="auto-toggle-accordion_open-icon-open">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M4 12h16"/>
            </svg>
          </span>

        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="auto-toggle-accordion_open-content" id="auto-toggle-accordion-open-panel-1">
        <div class="auto-toggle-accordion_open-content-inner">1つ目の内容が表示されます。</div>
      </div>

    </div>

    <!-- 2つ目の項目 -->
    <div class="auto-toggle-accordion_open-item">

      <!-- 開閉ボタン -->
      <button class="auto-toggle-accordion_open-button" type="button" aria-expanded="false" aria-controls="auto-toggle-accordion-open-panel-2">

        <!-- 見出し -->
        <span class="auto-toggle-accordion_open-label">見出し2</span>

        <!-- 開閉アイコン -->
        <span class="auto-toggle-accordion_open-icon" aria-hidden="true">

          <span class="auto-toggle-accordion_open-icon-closed">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 4v16 M4 12h16"/>
            </svg>
          </span>

          <span class="auto-toggle-accordion_open-icon-open">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M4 12h16"/>
            </svg>
          </span>

        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="auto-toggle-accordion_open-content" id="auto-toggle-accordion-open-panel-2">
        <div class="auto-toggle-accordion_open-content-inner">2つ目の内容が表示されます。</div>
      </div>

    </div>

    <!-- 3つ目の項目 -->
    <div class="auto-toggle-accordion_open-item">

      <!-- 開閉ボタン -->
      <button class="auto-toggle-accordion_open-button" type="button" aria-expanded="false" aria-controls="auto-toggle-accordion-open-panel-3">

        <!-- 見出し -->
        <span class="auto-toggle-accordion_open-label">見出し3</span>

        <!-- 開閉アイコン -->
        <span class="auto-toggle-accordion_open-icon" aria-hidden="true">

          <span class="auto-toggle-accordion_open-icon-closed">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 4v16 M4 12h16"/>
            </svg>
          </span>

          <span class="auto-toggle-accordion_open-icon-open">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M4 12h16"/>
            </svg>
          </span>

        </span>

      </button>

      <!-- 開閉する内容 -->
      <div class="auto-toggle-accordion_open-content" id="auto-toggle-accordion-open-panel-3">
        <div class="auto-toggle-accordion_open-content-inner">3つ目の内容が表示されます。</div>
      </div>

    </div>

  </div>

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

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
A

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

  1. ① InfinityFreeの無料サーバー準備
  2. ② File Managerでアップロード・公開

ファイル構成と設置方法

このサンプルでは、指定した秒数が経過したあとにアコーディオンを自動で開く方法と、自動で閉じる方法を用意しています。2種類のサンプルはそれぞれ独立しており、必要な方だけをダウンロードして使用できます。

どちらもHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには3つのアコーディオン項目を配置し、CSSで見出し・枠線・開閉アイコンなどのデザインを設定しています。JavaScriptでは、クリックによる開閉と、指定時間が経過したあとの自動開閉を制御しています。

2種類のサンプルはファイル名と構成が共通ですが、HTMLの初期状態とJavaScriptの自動開閉処理が異なります。 

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

各ファイルの役割
index.htmlには、3つの見出しと開閉する内容、プラス・マイナスのSVGアイコンを配置しています。「指定時間後に開く」ではすべて閉じた状態、「指定時間後に閉じる」ではすべて開いた状態から始まるように設定しています。
style.cssでは、アコーディオンの最大横幅、項目の間隔、枠線、角丸、文字サイズ、アイコンの色などを設定しています。また、is-openクラスの有無によって内容とアイコンの表示を切り替えています。
script.jsでは、各項目をクリックしたときの開閉処理に加え、setTimeout()を使用して指定時間後に項目を自動で開く、または閉じる処理を実行しています。

設置方法・使い方
セクション3の「指定時間後に開く」「指定時間後に閉じる」から使用したい動作を選び、「サンプル一式をダウンロード」をクリックしてください。

ダウンロードしたZIPファイルを展開し、index.html・style.css・script.jsを同じフォルダに配置します。index.htmlをブラウザで開くと、アコーディオンが表示されます。

「指定時間後に開く」では、最初は3つとも閉じており、約3秒後にすべて開きます。「指定時間後に閉じる」では、最初は3つとも開いており、約3秒後にすべて閉じます。

どちらのサンプルも、見出しをクリックすれば項目を個別に開閉できます。自動開閉の処理はページを読み込んだときに設定され、指定時間が経過すると1回実行されます。動作を最初から確認したい場合は、ブラウザでページを再読み込みしてください。

自動で開く・閉じる処理の違い
自動開閉には、JavaScriptのsetTimeout()を使用しています。指定時間が経過すると、items.forEach()で3つの項目を順番に取得し、setItemState()で開閉状態を変更します。

「指定時間後に開く」のscript.jsでは、次の処理を使用しています。 

// すべての項目を開く
items.forEach(function(item) {
  setItemState(item, true);
});

setItemState(item, true)のtrueは「開く」という意味です。対象の項目にis-openクラスが追加され、内容が表示されます。

一方、「指定時間後に閉じる」のscript.jsでは、次の処理を使用しています。 

// すべての項目を閉じる
items.forEach(function(item) {
  setItemState(item, false);
});

setItemState(item, false)のfalseは「閉じる」という意味です。対象の項目からis-openクラスが削除され、内容が非表示になります。

つまり、trueとfalseの違いによって、同じ関数で開く処理と閉じる処理を実行しています。

自動で開く・閉じるまでの秒数を変更する
自動開閉までの待機時間は、script.jsの最後にあるsetTimeout()で指定しています。

初期設定は3000で、ページのHTMLの読み込みが完了してから約3秒後に処理が実行されます。 

  // 3000ミリ秒＝3秒（5000にすると5秒後）
  setTimeout(function() {

    // すべての項目を開く
    items.forEach(function(item) {
      setItemState(item, true);
    });

    // 特定の項目だけ開く場合は、上の処理をコメントアウトして使用
    // setItemState(items[0], true); // 1番目を開く
    // setItemState(items[1], true); // 2番目を開く
    // setItemState(items[2], true); // 3番目を開く

  }, 3000);

上記は「指定時間後に開く」サンプルのコードです。setTimeout()の最後にある3000を変更すると、待機時間を調整できます。

JavaScriptでは時間をミリ秒で指定するため、1000が1秒です。例えば、2000なら2秒後、5000なら5秒後、10000なら10秒後に実行されます。

「指定時間後に閉じる」サンプルでも、同じ場所にある3000を変更します。開く場合も閉じる場合も、秒数の設定方法は共通です。

何番目の項目を自動で開く・閉じるか指定する
初期設定では、3つの項目すべてが自動開閉の対象です。特定の項目だけを開閉したい場合は、script.jsのsetTimeout()内を編集します。

ここで重要なのが、JavaScriptでは項目の番号を0から数えることです。

画面上の「1番目・2番目・3番目」は、JavaScriptでは次のように指定します。

1番目の項目 → items[0]
2番目の項目 → items[1]
3番目の項目 → items[2]

つまり、1・2・3番目の項目は、コードでは0・1・2になります。

例：2番目の項目だけを自動で開く
「指定時間後に開く」サンプルのscript.jsを編集します。

まず、すべての項目を開く処理を/*と*/で囲んでコメントアウトし、実行されないようにします。次に、2番目を開くsetItemState(items[1], true);の先頭にある//を削除します。

編集後は次のようになります。 

  // 3000ミリ秒＝3秒（5000にすると5秒後）
  setTimeout(function() {

    // すべての項目を開く
    /*
    items.forEach(function(item) {
      setItemState(item, true);
    });
    */

    // 特定の項目だけ開く
    // setItemState(items[0], true); // 1番目を開く
    setItemState(items[1], true); // 2番目を開く
    // setItemState(items[2], true); // 3番目を開く

  }, 3000);

この設定では、約3秒後に2番目の項目だけが開きます。1番目と3番目は閉じたままです。

1番目だけ開きたい場合はitems[0]、3番目だけ開きたい場合はitems[2]を使用してください。

複数の項目を指定することもできます。例えば、1番目と3番目だけを開きたい場合は、setItemState(items[0], true);とsetItemState(items[2], true);の両方を有効にします。

例：3番目の項目だけを自動で閉じる
「指定時間後に閉じる」サンプルでも、指定方法は同じです。ただし、閉じる処理ではtrueではなくfalseを使用します。

すべての項目を閉じる処理をコメントアウトし、3番目を閉じる処理だけを有効にします。 

  // 3000ミリ秒＝3秒（5000にすると5秒後）
  setTimeout(function() {

    // すべての項目を閉じる
    /*
    items.forEach(function(item) {
      setItemState(item, false);
    });
    */

    // 特定の項目だけ閉じる
    // setItemState(items[0], false); // 1番目を閉じる
    // setItemState(items[1], false); // 2番目を閉じる
    setItemState(items[2], false); // 3番目を閉じる

  }, 3000);

この設定では、最初は3つとも開いていますが、約3秒後に3番目の項目だけが閉じます。1番目と2番目は開いたままです。

1番目だけ閉じる場合はitems[0]、2番目だけ閉じる場合はitems[1]を指定します。

なお、項目番号はHTMLに並んでいる順番で決まります。項目を追加したり並び替えたりした場合は、items[0]・items[1]・items[2]が指す項目も変わります。

カスタマイズできる内容
index.htmlでは、auto-toggle-accordion_open-labelまたはauto-toggle-accordion_close-labelの文字を変更すると、見出しを変更できます。各項目のcontent-inner内の文章を書き換えると、開いたときに表示する内容を変更できます。

style.cssでは、各項目のborderで枠線、border-radiusで角丸、backgroundで背景色を変更できます。開閉アイコンの色は、auto-toggle-accordion_open-iconまたはauto-toggle-accordion_close-iconのcolor: #2563eb;で設定しています。

script.jsでは、自動開閉までの待機時間と、自動開閉の対象となる項目を変更できます。手動での開閉はそのまま利用できるため、自動開閉の対象から外した項目もクリックで開閉できます。

数値調整
style.cssのmax-width: 700px;は、アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。

各項目のmargin: 0 0 12px;では項目間の余白を調整できます。また、border-radius: 12px;の値を大きくすると、項目の角がより丸くなります。

自動開閉の待機時間は、script.jsのsetTimeout()の最後にある3000で調整します。CSSの数値とは異なり、こちらはミリ秒で指定するため、秒数に1000を掛けた値を入力してください。

レスポンシブ対応
style.cssでは、アコーディオン全体にwidth: 100%;とmax-width: 700px;を指定しています。広い画面では最大700pxで表示され、画面幅が狭くなると親要素に合わせて縮小します。

さらに、@media (max-width: 640px)では、開閉ボタン内の見出しとアイコンの間隔を16pxから12pxへ変更しています。アイコンの縮小を防ぐ設定もあり、スマートフォンでも見出しと開閉アイコンを横並びで表示できるようにしています。

この記事の動作・特徴

自動

指定時間、自動表示、自動再生、自動変換、自動フォーカスなど、自動で処理する機能を追加する記事。

その他のコードを探す

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント