簡単なtoggle（JavaScriptやCSSのみで）ボタン設置

toggle（トグル）ボタンとは、オンとオフなど 2つの状態の切り替えをおこなうボタンを指します。このtoggleを利用する機会があったので、ごく簡単なものをまとめてみました。jQuery、素のJavaScript、CSSのみの3種類です。いずれのサンプルも［トグルボタン］をクリックすると「Link」の下にurlのリストを表示し、再度［トグルボタン］をクリックすると、リストを閉じます。

サンプル（１）jQuery

Link

サンプル（１）のソース（スクリプト）

 const menu = $(".closed")
 const button = $(".Bu-toggle")
 button.on("click", () => {
   menu.toggleClass("opend")
 })

サンプル（２）素のJavaScript

Link

サンプル（２）のソース（スクリプト）

　const menu2 = document.querySelector(".closed2")
　const button2 = document.querySelector(".Bu-toggle2")
　button2.addEventListener("click", () => {
　　menu2.classList.toggle("opend2")
　})

サンプル（３）CSSのみ

トグルボタン

Link

サンプル（３）のソース（htmlとCSS）

/* html */
 <input id="toggle-checkbox-demo" type="checkbox">
 <label class="toggle-button" for="toggle-checkbox-demo">トグルボタン</label>
 <h4 class="top23">Link</h4>
 <div class="closed3">    
   <ul>
     <li><a href="https://www.google.com/">Google（https://www.google.com/）</a></li>
     <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN（https://www.yahoo.co.jp/）</a></li>
     <li><a href="https://www.bing.com/">Bing（https://www.bing.com/）</a></li>
   </ul>
  </div>
  
/* CSS */
 #test3 .closed3,
 #test3 > input[type="checkbox"] {
  display: none;
 }
 #test3 > input[type="checkbox"]:checked ~ .closed3 {
  display: block;
 }
 input[type="checkbox"] {
  display: none;
 }