読者の悩み
- 長すぎるコードや、ネタバレを隠しておきたい
- クリックで表示・非表示を切り替えられるボタンを作りたい
- コピペですむものが簡単で嬉しいな・・・。
こんな悩みに答える記事になっています。
記事中にコードが多すぎるので隠したかったり、映画のレビューではネタバレ防止をしたいというときに、クリック/タップで要素が出てきたら便利です。
今回は、そんなボタンの作り方を紹介します。
基本的にコピペで終わるので超簡単です。
1.クリックで表示・非表示切り替えボタンの見た目
完成品は以下の通りです。
実際にクリックして試してみてください。
ちなみに、コードの表示については、highlight.jsを使用しています。
詳しくは以下の記事を参考にしてみてください。
2.コピペするコードは3つ
今回使用するのはHTML、CSS、jQueryの3つです。
jQueryも記事中にコピペすることで、ボタンを掲載している記事のみで読み込むので、その記事しか重くならないという利点があります。
3.表示・非表示ボタンの具体的なコード
それでは実際のコードを掲載していきます。
いずれも、先ほど説明した箇所にコピペでOKです!
表示・非表示ボタンのHTML
<div><a class="slide-btn">+コードを見てみる</a></div> <div class="slide-contents"> <!--ここに内容を掲載--> </div>
文字を変えることで、ボタンの名前も変更可能です。
表示・非表示ボタンのjQuery
<script type="text/javascript"> jQuery(function($){ jQuery(".slide-btn").click(function(){ jQuery($(this).parent().next(".slide-contents")).animate( {height: "toggle", opacity: "toggle"}, "nomal" ); }); }); </script>
記事中には1回だけコピペすればOKです。
jQueryを使用することで、記事中にいくつもボタンを使いたい場合でも、HTMLを変更する必要がありません。
HTMLとCSSだけで作成する方法もあるのですが、毎回HTMLとCSSを変える必要があるので面倒です・・・。
また、テーマによってはjQueryを読み込んでいない場合もありますので、そんな場合は以下のコードをhead中に追加しましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
また、時に記事内に掲載したjQueryコードの中に自動で改行やタグが入ることがありますので、もし動かなければそこの確認も必要です。
デベロッパーツールなどを使用して確認するようにしましょう。
表示・非表示ボタンのCSS
.slide-btn { display: block; width: 200px; margin: 0 auto 1em auto; text-align: center; padding: 7px; border: none; color: #aaa; border-radius: 20px; background: #f8f8f8; cursor: pointer; } .slide-btn:first-letter { font-weight: bold; margin-right: 2px; } .slide-contents { width: 100%; margin: 0 0 1.6em 0; display: none; }
ボタンの最初の文字「+」を大文字にしています。
もしも、そんな文字を使わないのでしたら、.slide-btn:first-letter{ … } の部分は削除しましょう。
4.クリックで表示・非表示するボタンの作り方まとめ
昔は白色の文字で、ドラッグで色を反転させてネタバレを見ていました。
意外と使用するタイミングがあるので、是非とも機能として追加しておきたいです。
最近はオシャレなサイトが増えましたし、こういう細かいところもおしゃれにこだわって作っていくようにしましょう!