【JavaScript】ブログ記事内に表示/非表示ボタンを挿入する方法

WordPressで記事内に表示/非表示ボタンを挿入して、クリックしたら指定の文章を表示したり非表示にしたくて、調べた事をここでは紹介しています。

どのように記述したら良いか分からない方は、とりあえずここで記載しているコードをコピペして使用してみて下さい。

この記事の対象

行ったこと

表示/非表示

おためし

上記のようなボタンをクリックして文章を表示/非表示をするコードを記事内に挿入しました。

挿入したい場所でHTMLを入力

記事内の挿入したい箇所で「カスタムHTML」として以下を挿入します。

<!-- ボタンを配置する場所 -->
<button id="toggleButton">表示/非表示</button>

<!-- 表示/非表示する要素 -->
<p id="toggleElement">表示/非表示する要素の内容</p>

<style>
  #toggleButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 20px;
  }
</style>

<!-- JavaScriptのコード -->
<script>
  // ボタンをクリックした時の処理
  document.getElementById('toggleButton').addEventListener('click', function() {
    var elem = document.getElementById('toggleElement');
    if (elem.style.display === 'none') {
      elem.style.display = 'block';
    } else {
      elem.style.display = 'none';
    }
  });
</script>

上記では、css(style)もHTML内で指定しています。

最初から非表示にしたい場合

style内に以下を追加して下さい。

#toggleElement {
  display: none;
}

上記を追加することで、最初に要素が非表示に設定されます。

画像を表示/非表示したい場合

画像も追加したい場合があると思います。以下は画像の挿入方法になります。

表示/非表示

上記のようにしたい場合は、以下のようにすると良いです。

<!-- 表示/非表示する要素 -->
<div id="toggleElement">
  <p>表示/非表示する要素の内容</p>
  <img src="*****.png" alt="Test Phote">
</div>

「<img>」要素は自己完結型の要素であり、「</img>」タグは必要ありません。また、「alt」属性は画像が表示できなかった場合に代替テキストとして表示されるため、付けています。