指定時間後に自動で開くアコーディオンを作る方法
指定時間後に自動で開くアコーディオンを作る方法を紹介します。このサンプルでは、ページを表示してから3秒が経過すると、閉じているアコーディオンの内容が自動で開きます。HTML・CSS・JavaScriptのみで実装し、外部ライブラリを使わずに一定時間後の自動表示を実現します。
自動で開いた後も見出しをクリックして通常のアコーディオンと同じように開閉できます。一定時間が経過してから補足情報や案内を表示したい場合に利用でき、FAQページ、商品説明、会員サイトのヘルプ、管理画面など、最初は内容を閉じておき、少し時間を置いて利用者へ見せたい場面に適しています。
タイトル、説明文、見出し、表示内容はHTMLから変更できます。CSSでは横幅、余白、背景色、枠線、角丸、文字サイズなどを調整でき、JavaScriptの待機時間を変更すれば自動で開くタイミングも設定できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
動作確認を開始してから3秒後に、アコーディオンが自動で開きます。
3秒後にアコーディオンが自動で開きます。「もう一度確認する」を押すと閉じた状態へ戻り、再び3秒後に自動で開きます。
コードをコピーして使おう！
<!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">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="auto-open-accordion_wrap">
<!-- タイトル -->
<div class="auto-open-accordion_title">
指定時間後に自動で開くアコーディオン
</div>
<!-- 説明文 -->
<p class="auto-open-accordion_text">
ページを表示してから3秒後に、アコーディオンが自動で開きます。
</p>
<!-- アコーディオン項目 -->
<div class="auto-open-accordion_item">
<!-- 見出しボタン -->
<button
class="auto-open-accordion_button"
type="button">
アコーディオンとは？
</button>
<!-- 開閉する内容 -->
<div class="auto-open-accordion_content">
アコーディオンは見出しをクリックして内容を開閉できるUIです。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでアコーディオンの見出しと表示内容を作成し、CSSで全体のデザインや開閉状態を設定します。JavaScriptではページを表示してから3秒後にアコーディオンを自動で開く処理と、見出しをクリックしたときの開閉処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、見出し、開いたときに表示する内容を変更できます。
style.cssはアコーディオンのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、文字サイズ、開閉アイコンなどを変更できます。is-openクラスが付いた項目では内容が表示され、アイコンが「＋」から「－」へ切り替わります。
script.jsはアコーディオンの動作を設定するファイルです。ページを表示してから3秒後にis-openクラスを追加して内容を自動で開きます。また、見出しをクリックするとis-openクラスを切り替え、手動でも開閉できます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。ページを表示した直後はアコーディオンが閉じていますが、3秒が経過すると内容が自動で開きます。
自動で開いた後も、見出しをクリックすると閉じることができます。閉じている状態でも見出しをクリックすれば再び開けるため、自動表示後は通常のアコーディオンとして操作できます。
カスタマイズできる内容
index.htmlでは「指定時間後に自動で開くアコーディオン」のタイトル、説明文、「アコーディオンとは？」の見出し、開いたときに表示する文章を変更できます。用途に合わせてFAQや商品説明、ヘルプなどの内容へ置き換えられます。
style.cssではアコーディオン全体の最大横幅、余白、背景色、枠線、角丸、タイトルや見出しの文字サイズ、開閉アイコンの色や大きさなどを変更できます。script.jsではsetTimeoutに指定している数値を変更することで、自動で開くまでの待機時間を調整できます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとアコーディオン項目との間隔が広がり、小さくすると狭くなります。
border-radius:12px;
アコーディオン項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:16px 18px;
見出しボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
font-size:16px;
見出しの文字サイズです。値を大きくすると見出し文字が大きくなり、小さくすると小さくなります。
font-size:22px;
「＋」「－」の開閉アイコンの文字サイズです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。
script.js
3000
ページを表示してからアコーディオンを自動で開くまでの待機時間です。3000は3秒を表します。例えば5000へ変更すると5秒後、1000へ変更すると1秒後に自動で開きます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてアコーディオン全体が縮小されます。また、画面幅640px以下ではページ全体の余白を24px 12px、アコーディオンの内側余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント