<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.spoiler > input + .box > blockquote{
display: none;
}
.spoiler > input:checked + .box > blockquote {
display: block;
}
.spoiler > input {
display: none;
/*visibility: hidden;*/
}
.spoiler > label{
width:100px;
height:17px;
/*border:red solid 1px;*/
display:block;
position:absolute;
cursor: pointer;
}
.spoiler span.close,
.spoiler span.open{
margin-left:12px;
color: #00f!important;
text-decoration: underline;
}
.spoiler > input + .box > span.close {
display: none;
}
.spoiler > input:checked + .box > span.close {
display: inline;
}
.spoiler > input:checked + .box > span.open {
display: none;
}
.spoiler > input + .box > span.open {
display: inline;
}
.spoiler blockquote,
.spoiler{
padding:1em;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
}
.spoiler {
box-shadow: 0px 3px 8px #808080;
-webkit-box-shadow:0px 3px 8px #808080;
-khtml-box-shadow:0px 3px 8px #808080;
-moz-box-shadow:0px 3px 8px #808080;
-ms-box-shadow:0px 3px 8px #808080;
}
.spoiler blockquote {
margin-top:12px;
min-height: 23px;
border:#CDCDCD 2px dashed;
}
</style>
</head>
<body>
<div class="spoiler">
<label for="trigger"></label><input id="trigger" type="checkbox">
<div class="box">
<span class=close>Скрыть</span><span class=open>Показать</span>
<blockquote class="Untext">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</blockquote>
</div>
</div>
</body>
</html>
