details et summary

dabblet.css

/* details et summary */
header {background:#5489FD; box-shadow:0 0 5px;text-shadow:0 0 5px white}
hgroup,h1,h2 ,aside ,aside > ul ,li, details {display:inline-block;padding:5px;margin:0;vertical-align:middle;}
details, ul ul {width:120px;padding:0;cursor:text}
h2, aside>ul>li {border-left: groove gray 2px;height:20px;line-height:20px;text-align:center}
ul ul {position:absolute;z-index:1;border:solid #5489FD;background:#eee;border-bottom:0;box-shadow:0 0 5px;}
ul ul li {display:block;border-bottom:solid #5489FD;padding:2px;display:block;text-align:left;}
input[type=submit], details {border:none;background:none;cursor:pointer}
img {margin:-5px -10px 0 10px;box-shadow:0 0 5px 2px white;border-radius:3em/2em}
small {display:inline-block;font-size:0.5em;transform:rotate(-90deg);transform-origin:0.3em 0.5em;
letter-spacing:5px;font-family:tahoma;}
dd {margin:0.75em;}
a {color:gold;}
html {background:#333;text-shadow:1px 1px 1px black, 0 0 5px white;font-size:115%}

dabblet.html

<p style="text-align:center;font-variant:small-caps"><a href="http://result.dabblet.com/gist/5303378/">version page sans edition de code</a></p>
<header>
<hgroup><h1>Chatte-Box</h1><h2> <img src="http://www.photo-libre.fr/animaux/14.jpg" height="30" /></h2></hgroup>
<aside>
<ul><li>
<details><summary>Notifications</summary>
<ul><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li></ul>
</details>
</li>
<li>
<details><summary>Message</summary>
<ul><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li></ul>
</details>
</li>
<li>
<details><summary>Invitations</summary>
<ul><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li><li>notification blabla</li></ul>
</details>
</li>
<li><form action method><input type="text"/><input type="submit" value="Cherche" /></form></li>
<li>etc ...</li>
</ul>
</aside>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
	
			if (!('open' in document.createElement('details'))) {
				$("details").addClass('html5_details').each(function() {
					$(this).find("summary").show().click(function() {
						$(this).siblings().toggle();
						$(this).parent('details').toggleClass('open');
					});
					var opened = $(this).attr("open");
					if(opened==undefined) {
						$(this).children().hide();
						$(this).children("summary").show();
					}
				});
			}
		});

	</script>
	<dl>
	<dt>Sources complementaires :</dt>
	<dd><a href="http://www.photo-libre.fr">Photos Libres</a></dd>
	<dd><a href="http://www.alsacreations.com/article/lire/1335-html5-details-summary.html">Détails et Summary sur alsa<small>créations</small></a></dd>
	</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}