CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result
たまに見かけるコンテンツの表示/非表示のトグルです
css
.expand {
width: 300px;
padding:15px 10px;
max-height: 80px;
overflow: hidden;
position: relative;
border-bottom: 1px solid #aaa;
transition: .5s;
}
.expand::before {
content: "";
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
pointer-events: none;
transition: 1s;
}
.contenedor input {
visibility: hidden;
}
.contenedor label {
position: absolute;
bottom: -.8em;
display: block;
font-size: .9em;
padding: .20em 10px;
right: 0;
background: #aaa;
box-shadow:-5px 0 white;
color: white;
z-index:999;
cursor: pointer;
text-transform: uppercase;
}
.contenedor label:before {
content: "続きを読む";
}
.contenedor input:checked + label:before {
content: "閉じる"
}
input[type=checkbox]:checked ~ .expand {
max-height: 500px;
}
input[type=checkbox]:checked ~ .expand:before {
opacity: 0
}
|
html
<div class='contenedor'>
<input id='leer' type="checkbox"/>
<label for="leer"></label>
<div class="expand">
<span class='content'>ここにテキスト</span>
</div>
</div>
|
via
SlideToogle con CSS :checked
