ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

HP・ブログ関連

クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法

2019年4月7日

「小項目があり過ぎて、全部表示するとゴチャゴチャして見づらくなってしまう!」

そんな時には、クリックすると中身を展開したり閉じたりすることのできる
"折り畳みメニュー"がとても役に立ちます!

そこで今回は、面倒なjavascript等の記述をせずに、htmlに数行追加するだけで簡単に実現することのできる方法を紹介します!

※ "折りたたみメニュー"の実装例は以下のようになります。

 

 

上記の実装例のように、リンクを含めた文字列を含めることもできますし、画像を表示させることもできます。 (展開ボタンの装飾はcssなどで自由に行ってください)

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

折り畳みメニューの簡単な作成方法

折り畳みメニューを作成したいhtmlの設置したい箇所に、以下の行を追加してください。

<!-- 折り畳み展開ポインタ -->
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開</a>
</div>
<!--// 折り畳み展開ポインタ -->

<!-- 折り畳まれ部分 -->
<div id="open" style="display:none;clear:both;">

<!--ここの部分が折りたたまれる&展開される部分になります。
自由に記述してください。-->

</div>
<!--// 折り畳まれ部分 -->

注意点

・2行目と8行目に"open"という文字列がありますが、ここは任意の同じ文字列を入れてください。 (※ただし同じページの他のid属性と被らないように注意してください

・<div></div>で囲まれている9~12行目までが、展開表示or収納される部分です。画像を含めることもできます。

 

以上の行を追加するだけで手順は終了です。

展開表示機能をうまく使い、スッキリとした見やすいホームページにしましょう!

ゲームも仕事も快適に!

2020年5月:最も人気なゲーミングPCはこちら

関連コンテンツ

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

-HP・ブログ関連
-, , , , ,

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.