<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>
</head>
<body>
<div style="float:left;margin:0;padding:0">
This is sample text<br />
This is sample text<br />
This is sample text
</div>
<div style="position:relative;width:500px;height:500px;border:1px solid red;margin-left:auto;margin-right:auto;float:left">
<input type="checkbox" id="isexpanded"/>
<p style="position:absolute;left:200px"><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>
HELLO!
<p class="expandable">[another sample text]</p>
HELLO!
<div id="logo">1 2 3 4 5 6</div>
HELLO!
</div>
</body>
</html>
body{
background:grey;
margin:0;
padding:0;
}
#expand-btn {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}
#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
background: #B5B5B5;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}
#isexpanded {
display: none;
position:absolute;
left:200px
}
#isexpanded:checked ~ * p.expandable {
display: table-row;
background: #cccccc;
}
.expandable{
position:absolute;
top:20px;
height:20px
}
#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
display: block;
background: #cccccc;
transition:2s;
background:red;
color:yellow;
margin-top:200px;
}
#logo{
top:220px;
background-color:green;
width:100%;
position:absolute;
height:20px;
}
Template skopiowałem z:
- https://developer.mozilla.org/en-US/docs/Web/CSS/:checked