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 {/*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>

via

SlideToogle con CSS :checked