<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 {
  background: lightblue;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.26s ease;
}

input:checked ~ div {
  transform: scaleY(1);
}

@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: 50%;
  margin: 20px;
}

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

label {
  font-size: 24px;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.