HTML のみのアコーディオンを作成してコンテンツを非表示にしたり表示したりする (JS または CSS は使用しない)

in リソースとツール

コンテンツを非表示または表示するためのアコーディオンの [もっと読む/もっと少なく読む] ボタンを非常に簡単に作成するためのネイティブ HTML5 ソリューションがあることをご存知でしたか? JavaScript または CSS なし。 方法を見つけるために読んでください。

html5 アコーディオン

このアプリケーションには、XNUMXµmおよびXNUMXµm波長で最大XNUMXWの平均出力を提供する および HTML5 タグは正式に 開示ウィジェット要素しかし、 とペアになった HTML5タグはあなたに 純粋な HTML のみのアコーディオン.

意味 JS または CSS なし が必要です。 なんてクールだ!

これは、単純な要素を示す例です。 および .

これがコードです:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

これがどのように見えるかです:

続きを読む

これは、コンテンツの表示と非表示を切り替えるネイティブ HTML5 アコーディオンです。 かなりクールですよね?

システムを教えてください。 このアプリケーションには、XNUMXµmおよびXNUMXµm波長で最大XNUMXWの平均出力を提供する  タグは、開いたり閉じたりできる要素のラッパーとして機能します。 ユーザーはラベルをクリックする必要があります。 要素を開閉するタグ。

スタイルと行動はどうですか?

スタイル

CSS スタイルを適用して、リビール テキスト ボックスの外観をカスタマイズできます。 以下は、タブ付きのインターフェイス スタイルです。

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

デフォルトでは、カーソルは矢印のように表示されますが、 指差し手 代わりにこれを使用します:

details {
cursor: pointer;
}

行動

動作の設定は非常に限られています。実際にできることは XNUMX つだけです。それは、表示されたテキストを作成することです。 デフォルトで開く.

開いた状態でアコーディオンを開始するには、ブール値を追加します 開いた 属性を タグ:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
続きを読む

これは、コンテンツの表示と非表示を切り替えるネイティブ HTML5 アコーディオンです。 かなりクールですよね?

どの属性を使用できますか?

以下の属性は、 タグ:

属性まとめ
開いた開いたデフォルトは 開いていません.
id  一意の識別子を提供します。
class  クラス名要素にクラス名を割り当てます。
  CSS 値要素に CSS スタイルを割り当てます。

では、制限は何ですか? 常にキャッチがありますね。

Internet Explorer のサポートなし

この HTML5 専用のアコーディオンは、どのバージョンの Internet Explorer でも機能しません。 IE11 をサポートする必要がある場合は、JQuery を使用した別のフォールバック ソリューションを使用する必要があります。 他のすべてのブラウザーのサポート および .

カスタマイズされたアニメーションやトランジションはありません

(上記のように) 外観を変更してスタイルを設定することはできますが、テキスト表示のアニメーションやトランジションを行うことはできません。 それを行いたい場合は、別の CSS/JSS アコーディオン ソリューションが必要になります。

スクリーン リーダーとアクセシビリティ

これはネイティブです HTML5 アクセス可能であるべきですが、実際に表示されたテキストがスクリーン リーダーによって常に正しく読み上げられるとは限らないことがわかっています。

参照:

著者について

マット・アールグレン

Mathias Ahlgren は CEO 兼創設者です。 Website Rating、編集者とライターのグローバルチームを指揮しています。彼は情報科学と管理の修士号を取得しています。彼のキャリアは、大学時代に初期の Web 開発を経験した後、SEO に軸を移しました。 SEO、デジタル マーケティング、Web 開発に 15 年以上の経験があります。彼の焦点には Web サイトのセキュリティも含まれており、これはサイバー セキュリティの証明書によって証明されています。この多様な専門知識が彼のリーダーシップを支えています。 Website Rating.

ホームペー » リソースとツール » HTML のみのアコーディオンを作成してコンテンツを非表示にしたり表示したりする (JS または CSS は使用しない)

最新情報を入手してください。 ニュースレターに参加する
今すぐ購読して、購読者限定のガイド、ツール、リソースに無料でアクセスしてください。
いつでも購読を解除できます。 あなたのデータは安全です。
最新情報を入手してください。 ニュースレターに参加する
今すぐ購読して、購読者限定のガイド、ツール、リソースに無料でアクセスしてください。
いつでも購読を解除できます。 あなたのデータは安全です。
共有する...