CSSコピペでOK！クリックで要素の表示・非表示を切り替えるボタンを作る方法

読者の悩み

長すぎるコードや、ネタバレを隠しておきたい
クリックで表示・非表示を切り替えられるボタンを作りたい
コピペですむものが簡単で嬉しいな・・・。

こんな悩みに答える記事になっています。

記事中にコードが多すぎるので隠したかったり、映画のレビューではネタバレ防止をしたいというときに、クリック/タップで要素が出てきたら便利です。

今回は、そんなボタンの作り方を紹介します。

基本的にコピペで終わるので超簡単です。

1.クリックで表示・非表示切り替えボタンの見た目

完成品は以下の通りです。

実際にクリックして試してみてください。

＋コードを見てみる

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <img src="img_1.png">
  </body>
</html>

ちなみに、コードの表示については、highlight.jsを使用しています。

詳しくは以下の記事を参考にしてみてください。

>>WordPressに軽くおしゃれにコードを載せる方法

2.コピペするコードは3つ

今回使用するのはHTML、CSS、jQueryの3つです。

HTML、jQueryの掲載場所

投稿画面

テキスト編集

CSSの掲載場所

外観

テーマの編集

style.css

jQueryも記事中にコピペすることで、ボタンを掲載している記事のみで読み込むので、その記事しか重くならないという利点があります。

3.表示・非表示ボタンの具体的なコード

それでは実際のコードを掲載していきます。
いずれも、先ほど説明した箇所にコピペでOKです！

表示・非表示ボタンのHTML

HTML

<div><a class="slide-btn">＋コードを見てみる</a></div>
<div class="slide-contents">
<!--ここに内容を掲載-->
</div>

文字を変えることで、ボタンの名前も変更可能です。

表示・非表示ボタンのjQuery

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中に追加しましょう。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

また、時に記事内に掲載したjQueryコードの中に自動で改行やタグが入ることがありますので、もし動かなければそこの確認も必要です。

デベロッパーツールなどを使用して確認するようにしましょう。

【デベロッパーツールの使い方】Webデザイン変更をするなら必ず使おう

よりよいデザインを目指すためにchromeの検証機能―デベロッパーツールの使い方について紹介します。この便利機能なしではデザインをいじるのは難しく、私も多用しています。レスポンシブ対応できているか見る方法もあり、「デザインが崩れていて読みにくいor読めない」という理由だけで読者を逃がすことが無いようにします。

表示・非表示ボタンのCSS

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{ … } の部分は削除しましょう。