Forked from: milk55's 2017-02-07 1st View Diff (1) forked: 2017-02-07 1st fkyhsa.sh Follow 2017-03-05 15:30:40 License: MIT License Fork0 Fav0 View325 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 33 lines HTML 11 lines CSS 77 lines forked: 2017-02-07 1st jQuery v2.1.0 // forked from milk55's "2017-02-07 1st" http://jsdo.it/milk55/accordion /* 3. Progressive collapsibles by heydonworks.com http://www.heydonworks.com/ modified by milk https://white-stage.com/ ----------------------------------------------------------------------------- */ $('.collapsible h2').each(function() { var $this = $(this); // create unique id for a11y relationship var id = 'collapsible-' + $this.index(); // wrap the content and make it focusable $this.nextUntil('h2').wrapAll('<div id="'+ id +'" data-content="true">'); var panel = $this.next(); // Add the button inside the <h2> so both the heading and button semanics are read $this.wrapInner('<button data-state="false">'); var button = $this.children('button'); // Toggle the state properties button.on('click', function() { var state = $(this).attr('data-state') === 'false' ? true : false; $(this).attr('data-state', state); panel.attr('data-content', !state); }); }); <div class="wrap"> <h1><a href="http://heydonworks.com/practical_aria_examples/#progressive-collapsibles">Practical ARIA Examples - Progressive collapsibles</a> からWAI-ARIAの記述を削除したProgressive collapsibles</h1> <p>こちらの Progressive collapsibles は、WAI-ARIAの記述がないものになっています。</p> <div class="collapsible"> <h2>First title in block of content</h2> <p>Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia. </p><p>Nulla auctor eleifend turpis consequat pharetra: Vestibulum sit amet ipsum lacus… Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. </p><p>Curabitur consectetur faucibus nisl ac varius. Curabitur consectetur; faucibus nisl ac varius. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Nulla auctor eleifend turpis consequat pharetra. Suspendisse potenti H<sub>2</sub>0. Suspendisse <em>potenti</em>. </p> <h2>Another Third Level Heading</h2> <p>Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius. </p><p>Nunc iaculis risus vel ‘Orci Ornare’ dignissim sed vitae nulla. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. Fusce ac sodales magna. Nulla auctor eleifend 23<sup>rd</sup> of May turpis consequat pharetra. Suspendisse potenti H<sub>2</sub>0. </p> </div> <p><a href="http://www.heydonworks.com/">by heydonworks.com</a> <a href="//white-stage.com">(modified by milk)</a></p> </div> forked: 2017-02-07 1st * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; line-height: 1.6; font-size: 100%; font-family: "メイリオ", Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; } body * + * { margin-top: 1.5rem; } .wrap { padding: 1% 2%; } .collapsible { margin-bottom: 20px; padding: 50px 3%; width: 95%; background: #f0ffff; border: 1px solid #cccccc; } h1 { margin-bottom: 20px; font-size: 150%; } h2 { font-size: 125%; } h2:not(:nth-child(2n)) { margin-top: 2.25rem; } p { margin-bottom: 10px; } h2 [data-state]::before { content: "\25ba\0020"; } h2 { display: block; margin: 0; width: 100%; } h2:focus { background: #005c5c; outline: 4px solid #80aeae; } h2:active { background: #004545; border: none; } h2 [data-state="true"]::before { content: "\25bc\0020 "; } .collapsible h2 + [data-content] { display: none; } .collapsible h2 + [data-content="false"] { display: block; } button { display: inline-block; width: auto; padding: 0.25em 0.6em; background: #006c6c; border: none; text-align: left; color: #fefefe; cursor: pointer; font-size: 1.25em; font-weight: 700; letter-spacing: 2px; } // forked from milk55's "2017-02-07 1st" http://jsdo.it/milk55/accordion /* 3. Progressive collapsibles by heydonworks.com http://www.heydonworks.com/ modified by milk https://white-stage.com/ ----------------------------------------------------------------------------- */ $('.collapsible h2').each(function() { var $this = $(this); // create unique id for a11y relationship var id = 'collapsible-' + $this.index(); // wrap the content and make it focusable $this.nextUntil('h2').wrapAll('<div id="'+ id +'" data-content="true">'); var panel = $this.next(); // Add the button inside the <h2> so both the heading and button semanics are read $this.wrapInner('<button data-state="false">'); var button = $this.children('button'); // Toggle the state properties button.on('click', function() { var state = $(this).attr('data-state') === 'false' ? true : false; $(this).attr('data-state', state); panel.attr('data-content', !state); }); }); <div class="wrap"> <h1><a href="http://heydonworks.com/practical_aria_examples/#progressive-collapsibles">Practical ARIA Examples - Progressive collapsibles</a> からWAI-ARIAの記述を削除したProgressive collapsibles</h1> <p>こちらの Progressive collapsibles は、WAI-ARIAの記述がないものになっています。</p> <div class="collapsible"> <h2>First title in block of content</h2> <p>Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia. </p><p>Nulla auctor eleifend turpis consequat pharetra: Vestibulum sit amet ipsum lacus… Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. </p><p>Curabitur consectetur faucibus nisl ac varius. Curabitur consectetur; faucibus nisl ac varius. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Nulla auctor eleifend turpis consequat pharetra. Suspendisse potenti H<sub>2</sub>0. Suspendisse <em>potenti</em>. </p> <h2>Another Third Level Heading</h2> <p>Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius. </p><p>Nunc iaculis risus vel ‘Orci Ornare’ dignissim sed vitae nulla. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. Fusce ac sodales magna. Nulla auctor eleifend 23<sup>rd</sup> of May turpis consequat pharetra. Suspendisse potenti H<sub>2</sub>0. </p> </div> <p><a href="http://www.heydonworks.com/">by heydonworks.com</a> <a href="//white-stage.com">(modified by milk)</a></p> </div> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; line-height: 1.6; font-size: 100%; font-family: "メイリオ", Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; } body * + * { margin-top: 1.5rem; } .wrap { padding: 1% 2%; } .collapsible { margin-bottom: 20px; padding: 50px 3%; width: 95%; background: #f0ffff; border: 1px solid #cccccc; } h1 { margin-bottom: 20px; font-size: 150%; } h2 { font-size: 125%; } h2:not(:nth-child(2n)) { margin-top: 2.25rem; } p { margin-bottom: 10px; } h2 [data-state]::before { content: "\25ba\0020"; } h2 { display: block; margin: 0; width: 100%; } h2:focus { background: #005c5c; outline: 4px solid #80aeae; } h2:active { background: #004545; border: none; } h2 [data-state="true"]::before { content: "\25bc\0020 "; } .collapsible h2 + [data-content] { display: none; } .collapsible h2 + [data-content="false"] { display: block; } button { display: inline-block; width: auto; padding: 0.25em 0.6em; background: #006c6c; border: none; text-align: left; color: #fefefe; cursor: pointer; font-size: 1.25em; font-weight: 700; letter-spacing: 2px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author fkyhsa.sh Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/CHZf/js"></script> css html5_elements&api smartphones&tablets Discussion Questions on this code? Tags css html5_elements&api smartphones&tablets