<label for="ackapa">Göster / Gizle</label>
<input type="checkbox" id="ackapa">
<div>
  <span>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katıl.</span>
</div>
div {
  position:relative;
  max-height: 0;
  overflow: hidden;
  background: lightblue;
  transition: max-height 1.35s;
}

div span {
  padding: 20px;
  display: inline-block;
}

input:checked ~ div {
  max-height: 1000px;
}

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800');

* {
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-family: 'Merriweather Sans', sans-serif;
  width: 70%;
  margin: 20px;
}

input[type="checkbox"] {
  display: none;
}

label {
  font-size: 24px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.