Webページ上のテキストを展開および折りたたむ方法

コンピューターで男性を助ける女性

画像クレジット: Jupiterimages / Pixland / Getty Images

WebデザイナーがWebサイトのテキストを展開したり折りたたんだりする必要がある場合がよくあります。 この機能は、FAQの設定、ブログエントリの整理、なぞなぞやクイズの機能の作成に特に役立ちます。 このJavaコードをWebサイトに挿入して、折りたたみ可能なテキストを実装します。

ステップ1

折りたたみ可能なテキストを追加するWebページのHTMLコードを開きます。 およびタグを見つけます。 それらの間に、次のコードをコピーして貼り付けます。

今日のビデオ

ステップ2

折りたたみ可能なテキストを配置する必要があるセクションを見つけます。 次のコードをそこに貼り付けます。 この行は、IDが「a1」のセクションを切り替えるヘッダーを作成します

セクション1

IDが「a1」でクラスが「texter」のコンテナ内にセクションテキストを入力します。

セクション1の内容。

ステップ3

追加のアイテムが必要な場合は、セクションのタイトルとコンテンツ領域ごとに異なるIDのペアを使用して、パターンを続行します。 ファイルを保存し、コードをテストして、正しく機能することを確認します。 ヘッダーをクリックして非表示のテキストを表示し、それを非表示にできるはずです。