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 {/*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 {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/ |
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> |
