PlusOne Blog

【html】アコーディオン(開閉スライド)コンテンツ

<details> と <summary> を使うことで、アコーディオン(開閉スライド)コンテンツを作成できます。
 

 
<解説>

   <details>
    <summary>プラスワンってどんな会社?</summary>
    <div>
     <p>介護保険業務支援ソフトウェアを作っている会社です。</p>
    </div>
   </details>

 
<details> : アコーディオン全体を囲みます。はじめからアコーディオンを開いておく場合は、open 属性を付与します。
 
<summary> : アコーディオンのタイトル(常に見えているテキスト)を入れます。ここをクリックするとアコーディオンが開閉します。
 
<div> : <summary> の兄弟要素で、アコーディオンが開閉で表示・非表示される要素になります。何個でも配置できます。
 

 

 

この記事を読む
記事一覧に戻る