簡単なtoggle(JavaScriptやCSSのみで)ボタン設置
toggle(トグル)ボタンとは、オンとオフなど 2つの状態の切り替えをおこなうボタンを指します。このtoggleを利用する機会があったので、ごく簡単なものをまとめてみました。jQuery、素のJavaScript、CSSのみの3種類です。いずれのサンプルも[トグルボタン]をクリックすると「Link」の下にurlのリストを表示し、再度[トグルボタン]をクリックすると、リストを閉じます。
サンプル(1)jQuery
Link
サンプル(1)のソース(スクリプト)
const menu = $(".closed")
const button = $(".Bu-toggle")
button.on("click", () => {
menu.toggleClass("opend")
})
サンプル(2)素のJavaScript
Link
サンプル(2)のソース(スクリプト)
const menu2 = document.querySelector(".closed2")
const button2 = document.querySelector(".Bu-toggle2")
button2.addEventListener("click", () => {
menu2.classList.toggle("opend2")
})
サンプル(3)CSSのみ
Link
サンプル(3)のソース(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;
}