CSS3 Toggle Button
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS だけで作る表示の切り替え
トグル機能は、html5では、details 要素を使って、htmlだけで実装する事が可能ですが、ブラウザのサポートはまだ実用段階にはありません
detail要素を使ったサンプル
chrome ブラウザで表示できます。
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS2.1では、フラグメント識別子（#）を使って、表示する等いろいろと行われてきましたが、ここでは、input要素を使って表示の切り替えを行ってみました。
どうして、CSSだけでクリックイベントみたいなのが書けるのか、については「CSSだけで、クリックイベントを実装する」も参照してみてください 🙂
HTML
<div class="wrap"> <div class="switch"><input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" /> <label for="cmn-toggle-1"></label></div> <div class="switch"><input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" /> <label for="cmn-toggle-4"></label> <div class="toggle-container"> <h3>Lorem ipsum dolor sit amet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="http://callmenick.com/post/css-toggle-switch-examples">@toggle button source</a></p> </div> </div> <div class="switch"><input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" /> <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label></div> </div>
CSS
.toggle-container{
display:none;
}
.cmn-toggle:checked+label + .toggle-container{
display:block;
border:2px solid #3498db;
border-radius: 5px;
padding:1em;
margin-top:1em;
}
.wrap{
position:relative;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #dddddd;
border-radius: 30px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
.entry-content input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 30px;
transition: background 0.4s;
}
.entry-content input.cmn-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 26px;
background-color: #dddddd;
border-radius: 26px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
background-color: #3498db;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 30px;
background-color: #3498db;
}