<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">東京(とうきょう)とは、日本の関東平野中央部の東京湾に面する世界最大級のメトロポリスであり、日本の事実上の首都である。現在、東京には23特別区・26市・5町・8村の基礎自治体がある。 <span class="read-more-target">江戸幕府の所在地であった江戸(えど)という都市が慶応4年7月(1868年9月)に「東京」に名称変更されたものである。1869年3月28日に、日本の国の政治の中枢機能が移転され、京都に都としての位置付けを残したまま、「東京」に奠都(てんと)された。その時以来、日本の事実上の首都の役割を担って来たが、東京都を首都と定める法令は現存せず、日本の歴代の首都において、現在に至るまで天皇により遷都の詔書が発せられていない唯一の例である。その人口に着目すると、東京は1923年には関東大震災を経験し、多くの家屋が焼け、東京市では人口の3割強が減少した。その後1940年時点では東京23区の人口は約680万人まで増えていたのだが、太平洋戦争により、東京の住民は兵士や他の地方の軍需工場の労働力として召集されたり、疎開が行われたり、同戦争末期(1944~45年ころ)に米軍により東京に対して100回を超える爆撃(東京大空襲)が行われ、焼夷弾によって多くの家屋が焼かれ人々が殺されたり避難を余儀なくされたことが影響し、人口減少が続き、太平洋戦争直後時点では東京23区の人口は280万人まで減っていたとされる。戦後には東京は目覚ましい復興を遂げ、人口は増え続け、2019年時点で、東京都で約1300万人まで、また、いわゆる「首都圏」(東京圏)では3700万人まで増えた。(<a href="https://ja.wikipedia.org/wiki/東京">Wikipedia</a>)</span>
	  
	</p>
  
  <label for="post-1" class="read-more-trigger"></label>
</div>

<hr>

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem </li>
    <li class="read-more-target">lorem </li>
    <li class="read-more-target">lorem </li>
	      <li class="read-more-target">lorem</li>
    <li class="read-more-target">lorem</li>
	      <li class="read-more-target">lorem</li>
    <li class="read-more-target">lorem</li>
	      <li class="read-more-target">lorem</li>
    <li class="read-more-target">lorem</li>
	      <li class="read-more-target">lorem</li>
    <li class="read-more-target">lorem</li>
  </ul>
  
  <label for="post-2" class="read-more-trigger"></label>
</div>
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .15s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: '続きを読む';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: '閉じる';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/* Other style */ 
body {
  padding: 2%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.