forked: 2017-02-07 1st

Readme
JavaScript 33 lines
HTML 11 lines
CSS 77 lines

forked: 2017-02-07 1st
jQuery v2.1.0

$('.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 &ndash; 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 &#8216;convallis vitae&#8217; luctus libero lacinia. </p><p>Nulla auctor eleifend turpis consequat pharetra: Vestibulum sit amet ipsum lacus&hellip; Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; 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&hellip; 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 &#8216;molestie&#8217; 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 &#8216;Orci Ornare&#8217; 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, "ＭＳ Ｐゴシック", "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, "ＭＳＰゴシック", "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; }

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

forked: 2017-02-07 1st

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags