original accordeon layout full page 2contents

dabblet.css

/* original accordeon layout full page 2contents */
html,body, body > section {height:100%;margin:0 auto;}
article {height:100%;}
h1 {height:20%;margin:0;text-align:center;}
h1 a {padding:1em;display:inline-block;}
article section:first-of-type {height:60%;}
section ~ section {height:0;}
article > h1,article > section {position:relative;top:0;transition:1s;overflow:auto;}
:target , section + :focus, 
:target + section, section + :focus + section {top:-60%;}
section  + :target + section, section +:focus + section {height:60%;margin-bottom:-100%;}
section + :focus:not(:target) a:after {content:'click me to freeze this!';float:right;}

/* makeup */

html,body, body > section {}
article {background:#def;box-shadow:0 0 0 1px;}
h1 {box-shadow:0 0 0 1px;background:#abc;}
section ~ section {}
section {width:800px;}

dabblet.html

<section>
 <article>
	 <h1 tabindex="0"> <a href="#">T1</a></h1>
		 <section>
			 	C1
		 </section>
		 <h1 id="c2" tabindex="0"> <a href="#c2">T2</a></h1>		 <section>
		 		C2<br/><br/><br/><br/><br/><br/><br/><br/><br/>
		 		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		 		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		 		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		 </section>
</article>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}