Created
July 16, 2017 15:10
-
-
Save feo52/16fae0c2971e600d1be80a46eaf438d7 to your computer and use it in GitHub Desktop.
Pure CSS Accordion with :checked
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Pure CSS Accordion with :checked</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <hr><h2>Demo</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-blue accordion-sensor-right"> | |
| <div class="accordion-xxxxer-item">header1</div> | |
| <label class="accordion-sensor" for="accordion-switch"> | |
| <span class="accordion-show">OPEN </span> | |
| <span class="accordion-hide">CLOSE</span> | |
| </label> | |
| <div class="accordion-xxxxer-item">header2</div> | |
| </div> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| <div class="accordion-footer accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-blue accordion-sensor-right"> | |
| <div class="accordion-xxxxer-item">footer1</div> | |
| <label class="accordion-sensor" for="accordion-switch"> | |
| <span class="accordion-show">READ MORE</span> | |
| <span class="accordion-hide">CLOSE </span> | |
| </label> | |
| <div class="accordion-xxxxer-item">footer2</div> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Demo1</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch1"> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| <div class="accordion-footer accordion-sensor-left"> | |
| <div class="accordion-xxxxer-item"></div> | |
| <label class="accordion-sensor" for="accordion-switch1"> | |
| <span class="accordion-show">READ MORE</span> | |
| <span class="accordion-hide">CLOSE </span> | |
| </label> | |
| <div class="accordion-xxxxer-item"></div> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Demo2</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch2"> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| <div class="accordion-footer accordion-sensor-right"> | |
| <div class="accordion-xxxxer-item"></div> | |
| <label class="accordion-sensor" for="accordion-switch2"> | |
| <span class="accordion-show">READ MORE</span> | |
| <span class="accordion-hide">CLOSE </span> | |
| </label> | |
| <div class="accordion-xxxxer-item"></div> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Demo3</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch3"> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| <div class="accordion-footer accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-center"> | |
| <div class="accordion-xxxxer-item"></div> | |
| <label class="accordion-sensor" for="accordion-switch3"> | |
| <span class="accordion-show">▽</span> | |
| <span class="accordion-hide">△</span> | |
| </label> | |
| <div class="accordion-xxxxer-item"></div> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Demo4</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch4"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-red accordion-sensor-center"> | |
| <div class="accordion-xxxxer-item"></div> | |
| <label class="accordion-sensor" for="accordion-switch4"> | |
| <span class="accordion-show">TITLE</span> | |
| <span class="accordion-hide">TITLE</span> | |
| </label> | |
| <div class="accordion-xxxxer-item"></div> | |
| </div> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Demo5</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switch5"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-green accordion-sensor-right"> | |
| <div class="accordion-xxxxer-item">header1</div> | |
| <label class="accordion-sensor" for="accordion-switch5"> | |
| <span class="accordion-show">OPEN </span> | |
| <span class="accordion-hide">CLOSE</span> | |
| </label> | |
| <div class="accordion-xxxxer-item">header2</div> | |
| </div> | |
| <div class="accordion-window accordion-windowMinHeight100px accordion-windowMaxHeight400px"> | |
| PI = 3. | |
| 14159265358979323846264338327950288419716939937510<br> | |
| 58209749445923078164062862089986280348253421170679<br> | |
| 82148086513282306647093844609550582231725359408128<br> | |
| 481117450284102701938<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>110555964462294895493038196<br> | |
| 44288109756659334461284756482337867831652712019091<br> | |
| 45648566923460348610454326648213393607260249141273<br> | |
| 72458700660631558817488152092096282925409171536436<br> | |
| 78925903600113305305488204665213841469519415116094<br> | |
| 33057270365759591953092186117381932611793105118548<br> | |
| 07446237996274956735188575272489122793818301194912<br> | |
| 98336733624406566430860213949463952247371907021798<br> | |
| 60943702770539217176293176752384674818467669405132<br> | |
| 00056812714526356082778577134275778960917363717872<br> | |
| 14684409012249534301465495853710507922796892589235<br> | |
| 42019956112129021960864034418159813629774771309960<br> | |
| 51870721134999999837297804995105973173281609631859<br> | |
| 50244594553469083026425223082533446850352619311881<br> | |
| 710100031378387<a style="text-decoration: none;" href="http://qiita.com/feo52">52</a>886587533208381420617177669147303<br> | |
| 59825349042875546873115956286388235378759375195778<br> | |
| 18577805321712268066130019278766111959092164201989<br> | |
| </div> | |
| <div class="accordion-footer accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-green accordion-sensor-wide-center"> | |
| <div class="accordion-xxxxer-item">footer1</div> | |
| <label class="accordion-sensor" for="accordion-switch5"> | |
| <span class="accordion-show">READ MORE</span> | |
| <span class="accordion-hide">CLOSE </span> | |
| </label> | |
| <div class="accordion-xxxxer-item">footer2</div> | |
| </div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Position</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switchP"> | |
| <div>accordion-sensor-left </div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-left accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div>accordion-sensor-center </div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-center accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div>accordion-sensor-right </div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div>accordion-sensor-wide-left </div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-wide-left accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div>accordion-sensor-wide-center</div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-wide-center accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div>accordion-sensor-wide-right </div><div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-wide-right accordion-blue"><div class="accordion-xxxxer-item">header1</div><label class="accordion-sensor" for="accordion-switchP"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Shape</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switchS"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-angular accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-sensor-angular</div><label class="accordion-sensor" for="accordion-switchS"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-sensor-rounded</div><label class="accordion-sensor" for="accordion-switchS"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">nothing </div><label class="accordion-sensor" for="accordion-switchS"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Color</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switchC"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-black "><div class="accordion-xxxxer-item">accordion-black </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-silver"><div class="accordion-xxxxer-item">accordion-silver </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-red "><div class="accordion-xxxxer-item">accordion-red </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-blue </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-teal "><div class="accordion-xxxxer-item">accordion-teal </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-green "><div class="accordion-xxxxer-item">accordion-green </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-orange"><div class="accordion-xxxxer-item">accordion-orange </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-maroon"><div class="accordion-xxxxer-item">accordion-maroon </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-gray "><div class="accordion-xxxxer-item">accordion-gray </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right "><div class="accordion-xxxxer-item">nothing </div><label class="accordion-sensor" for="accordion-switchC"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Size</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switchZ"> | |
| <div class="accordion-header accordion-decoration-01 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">nothing </div><label class="accordion-sensor" for="accordion-switchZ"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-size-x2 </div><label class="accordion-sensor" for="accordion-switchZ"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x3 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-size-x3 </div><label class="accordion-sensor" for="accordion-switchZ"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| </div> | |
| <br><br><br><br><br> | |
| <hr><h2>Decoration</h2><hr> | |
| <div class="accordion-container"> | |
| <input class="accordion-switch" type="checkbox" id ="accordion-switchD"> | |
| <div class="accordion-header accordion-decoration-01 accordion-size-x2 accordion-sensor-rounded accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">accordion-decoration-01 </div><label class="accordion-sensor" for="accordion-switchD"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| <div class="accordion-header accordion-sensor-right accordion-blue "><div class="accordion-xxxxer-item">nothing </div><label class="accordion-sensor" for="accordion-switchD"><span class="accordion-show">OPEN</span><span class="accordion-hide">CLOSE</span></label><div class="accordion-xxxxer-item">header2</div></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* -------------------------------------------------------------------------------------------------------- | |
| Pure CSS Accordion | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-switch { | |
| display: none; | |
| } | |
| .accordion-sensor { | |
| cursor: pointer; | |
| color: blue; | |
| } | |
| .accordion-window { | |
| position: relative; | |
| overflow: hidden; | |
| transition: max-height 1s; | |
| max-height: 0; | |
| } | |
| .accordion-switch:checked ~ .accordion-window { | |
| max-height: 100vh; | |
| } | |
| .accordion-window::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,1) ); | |
| pointer-events: none; | |
| transition: opacity 1s; | |
| opacity: 1; | |
| } | |
| .accordion-switch:checked ~ .accordion-window::after { | |
| opacity: 0; | |
| } | |
| /* ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-switch ~ .accordion-header .accordion-sensor .accordion-hide, | |
| .accordion-switch:checked ~ .accordion-header .accordion-sensor .accordion-show, | |
| .accordion-switch ~ .accordion-footer .accordion-sensor .accordion-hide, | |
| .accordion-switch:checked ~ .accordion-footer .accordion-sensor .accordion-show, | |
| .accordion-switch ~* .accordion-header .accordion-sensor .accordion-hide, | |
| .accordion-switch:checked ~* .accordion-header .accordion-sensor .accordion-show, | |
| .accordion-switch ~* .accordion-footer .accordion-sensor .accordion-hide, | |
| .accordion-switch:checked ~* .accordion-footer .accordion-sensor .accordion-show { | |
| display: none; | |
| } | |
| .accordion-switch ~ .accordion-header .accordion-sensor .accordion-show, | |
| .accordion-switch:checked ~ .accordion-header .accordion-sensor .accordion-hide, | |
| .accordion-switch ~ .accordion-footer .accordion-sensor .accordion-show, | |
| .accordion-switch:checked ~ .accordion-footer .accordion-sensor .accordion-hide, | |
| .accordion-switch ~* .accordion-header .accordion-sensor .accordion-show, | |
| .accordion-switch:checked ~* .accordion-header .accordion-sensor .accordion-hide, | |
| .accordion-switch ~* .accordion-footer .accordion-sensor .accordion-show, | |
| .accordion-switch:checked ~* .accordion-footer .accordion-sensor .accordion-hide { | |
| display: inline; | |
| } | |
| /* ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-window.accordion-windowMinHeight100px { max-height: 100px; } | |
| .accordion-window.accordion-windowMinHeight200px { max-height: 200px; } | |
| .accordion-window.accordion-windowMinHeight300px { max-height: 300px; } | |
| .accordion-window.accordion-windowMinHeight400px { max-height: 400px; } | |
| .accordion-window.accordion-windowMinHeight500px { max-height: 500px; } /* | |
| .accordion-window.accordion-windowMinYourSetting { max-height: } */ | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight100px { max-height: 100px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight200px { max-height: 200px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight300px { max-height: 300px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight400px { max-height: 400px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight500px { max-height: 500px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight600px { max-height: 600px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight700px { max-height: 700px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight800px { max-height: 800px; } | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight900px { max-height: 900px; } /* | |
| .accordion-switch:checked ~ .accordion-window.accordion-windowMaxYourSetting { max-height: } */ | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Position | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-sensor-left, | |
| .accordion-sensor-right, | |
| .accordion-sensor-center { | |
| display: flex; | |
| } | |
| .accordion-sensor-left > .accordion-xxxxer-item:first-child { display: none; } | |
| .accordion-sensor-left > .accordion-sensor + .accordion-xxxxer-item { flex: 1; text-align: right; } | |
| .accordion-sensor-left > .accordion-sensor { text-align: left; } | |
| .accordion-sensor-right > .accordion-xxxxer-item { flex: 1; text-align: left; } | |
| .accordion-sensor-right > .accordion-sensor + .accordion-xxxxer-item { display: none; } | |
| .accordion-sensor-right > .accordion-sensor { text-align: right; } | |
| .accordion-sensor-center > .accordion-xxxxer-item { flex: 2; text-align: left; } | |
| .accordion-sensor-center > .accordion-sensor + .accordion-xxxxer-item { flex: 2; text-align: right; } | |
| .accordion-sensor-center > .accordion-sensor { text-align: center; } | |
| .accordion-sensor-wide-left .accordion-xxxxer-item, | |
| .accordion-sensor-wide-right .accordion-xxxxer-item, | |
| .accordion-sensor-wide-center .accordion-xxxxer-item { | |
| display: none; | |
| } | |
| .accordion-sensor-wide-left .accordion-sensor { display: block; text-align: left; } | |
| .accordion-sensor-wide-right .accordion-sensor { display: block; text-align: right; } | |
| .accordion-sensor-wide-center .accordion-sensor { display: block; text-align: center; } | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Color | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-header.accordion-black { color: white; background-color: black; } | |
| .accordion-footer.accordion-black { color: white; background-color: black; } | |
| .accordion-header.accordion-black .accordion-sensor { color: white; background-color: black; } | |
| .accordion-footer.accordion-black .accordion-sensor { color: white; background-color: black; } | |
| .accordion-header.accordion-black .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-black .accordion-sensor { color: white; } | |
| .accordion-header.accordion-silver { color: black; background-color: gainsboro; } | |
| .accordion-footer.accordion-silver { color: black; background-color: gainsboro; } | |
| .accordion-header.accordion-silver .accordion-sensor { color: black; background-color: gainsboro; } | |
| .accordion-footer.accordion-silver .accordion-sensor { color: black; background-color: gainsboro; } | |
| .accordion-header.accordion-silver .accordion-sensor { color: black; } | |
| .accordion-footer.accordion-silver .accordion-sensor { color: black; } | |
| .accordion-header.accordion-red { color: white; background-color: firebrick; } | |
| .accordion-footer.accordion-red { color: white; background-color: firebrick; } | |
| .accordion-header.accordion-red .accordion-sensor { color: white; background-color: firebrick; } | |
| .accordion-footer.accordion-red .accordion-sensor { color: white; background-color: firebrick; } | |
| .accordion-header.accordion-red .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-red .accordion-sensor { color: white; } | |
| .accordion-header.accordion-blue { color: white; background-color: navy; } | |
| .accordion-footer.accordion-blue { color: white; background-color: navy; } | |
| .accordion-header.accordion-blue .accordion-sensor { color: white; background-color: navy; } | |
| .accordion-footer.accordion-blue .accordion-sensor { color: white; background-color: navy; } | |
| .accordion-header.accordion-blue .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-blue .accordion-sensor { color: white; } | |
| .accordion-header.accordion-teal { color: white; background-color: teal; } | |
| .accordion-footer.accordion-teal { color: white; background-color: teal; } | |
| .accordion-header.accordion-teal .accordion-sensor { color: white; background-color: teal; } | |
| .accordion-footer.accordion-teal .accordion-sensor { color: white; background-color: teal; } | |
| .accordion-header.accordion-teal .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-teal .accordion-sensor { color: white; } | |
| .accordion-header.accordion-green { color: white; background-color: darkgreen; } | |
| .accordion-footer.accordion-green { color: white; background-color: darkgreen; } | |
| .accordion-header.accordion-green .accordion-sensor { color: white; background-color: darkgreen; } | |
| .accordion-footer.accordion-green .accordion-sensor { color: white; background-color: darkgreen; } | |
| .accordion-header.accordion-green .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-green .accordion-sensor { color: white; } | |
| .accordion-header.accordion-orange { color: white; background-color: darkorange; } | |
| .accordion-footer.accordion-orange { color: white; background-color: darkorange; } | |
| .accordion-header.accordion-orange .accordion-sensor { color: white; background-color: darkorange; } | |
| .accordion-footer.accordion-orange .accordion-sensor { color: white; background-color: darkorange; } | |
| .accordion-header.accordion-orange .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-orange .accordion-sensor { color: white; } | |
| .accordion-header.accordion-maroon { color: white; background-color: maroon; } | |
| .accordion-footer.accordion-maroon { color: white; background-color: maroon; } | |
| .accordion-header.accordion-maroon .accordion-sensor { color: white; background-color: maroon; } | |
| .accordion-footer.accordion-maroon .accordion-sensor { color: white; background-color: maroon; } | |
| .accordion-header.accordion-maroon .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-maroon .accordion-sensor { color: white; } | |
| .accordion-header.accordion-gray { color: white; background-color: darkslategray; } | |
| .accordion-footer.accordion-gray { color: white; background-color: darkslategray; } | |
| .accordion-header.accordion-gray .accordion-sensor { color: white; background-color: darkslategray; } | |
| .accordion-footer.accordion-gray .accordion-sensor { color: white; background-color: darkslategray; } | |
| .accordion-header.accordion-gray .accordion-sensor { color: white; } | |
| .accordion-footer.accordion-gray .accordion-sensor { color: white; } | |
| :root .accordion-header.accordion-sensor-wide-left { background-color: transparent; } | |
| :root .accordion-header.accordion-sensor-wide-right { background-color: transparent; } | |
| :root .accordion-header.accordion-sensor-wide-center{ background-color: transparent; } | |
| :root .accordion-footer.accordion-sensor-wide-left { background-color: transparent; } | |
| :root .accordion-footer.accordion-sensor-wide-right { background-color: transparent; } | |
| :root .accordion-footer.accordion-sensor-wide-center{ background-color: transparent; } | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Color for Test | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-container.accordion-test-color { background: #cccccc; color: #000000; } | |
| .accordion-container.accordion-test-color .accordion-header { background: #ffe0e0; color: #000000; } | |
| .accordion-container.accordion-test-color .accordion-window { background: #e0ffe0; color: #000000; } | |
| .accordion-container.accordion-test-color .accordion-window::after { background: linear-gradient( rgba(224,255,224,0), rgba(224,255,224,1) ); } | |
| .accordion-container.accordion-test-color .accordion-footer { background: #e0e0ff; color: #000000; } | |
| .accordion-container.accordion-test-color .accordion-sensor { background: #ffff00; color: #ff0000; } | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Shape | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-header.accordion-sensor-rounded .accordion-sensor, | |
| .accordion-footer.accordion-sensor-rounded .accordion-sensor { | |
| border: solid .1em; | |
| border-radius: .2em; | |
| } | |
| .accordion-header.accordion-sensor-angular .accordion-sensor, | |
| .accordion-footer.accordion-sensor-angular .accordion-sensor { | |
| border: solid .1em; | |
| border-radius: 0; | |
| } | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Size | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-header.accordion-size-x1, | |
| .accordion-footer.accordion-size-x1 { | |
| font-size: 1rem; | |
| } | |
| .accordion-header.accordion-size-x2, | |
| .accordion-footer.accordion-size-x2 { | |
| font-size: 2rem; | |
| } | |
| .accordion-header.accordion-size-x3, | |
| .accordion-footer.accordion-size-x3 { | |
| font-size: 3rem; | |
| } | |
| /* -------------------------------------------------------------------------------------------------------- | |
| Decoration | |
| ----------------------------------------------------------------------------------------------------- */ | |
| .accordion-header.accordion-decoration-01 { | |
| margin-bottom: .2em; | |
| } | |
| .accordion-footer.accordion-decoration-01 { | |
| margin-top: .2em; | |
| } | |
| .accordion-header.accordion-decoration-01, | |
| .accordion-footer.accordion-decoration-01 { | |
| padding: .5em 1em .5em 1em; | |
| } | |
| .accordion-header.accordion-decoration-01.accordion-sensor-wide-left, | |
| .accordion-footer.accordion-decoration-01.accordion-sensor-wide-left, | |
| .accordion-header.accordion-decoration-01.accordion-sensor-wide-right, | |
| .accordion-footer.accordion-decoration-01.accordion-sensor-wide-right, | |
| .accordion-header.accordion-decoration-01.accordion-sensor-wide-center, | |
| .accordion-footer.accordion-decoration-01.accordion-sensor-wide-center { | |
| padding: 0 0 0 0; | |
| } | |
| /* ----------------------------------------------------------------------------------------------------- */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment