<input type="checkbox" name="gizleGoster" id="gizleGoster" />
<label for="gizleGoster"></label>
<div class="icerik">
  <h2>M. Serdar Kuzuloğlu</h2>
  <p>Küfür etmeden yapabildiğimiz her eleştiri elimizin, iddiamızın gücünü gösterir. Küfür ve hakaret ancak kof iddiaların içini doldurur. <a href="https://twitter.com/mserdark/status/764805547237466112">https://twitter.com/mserdark/</a></p>
</div>
body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 20px 0 0 20px;
}
  

input[type="checkbox"] {
  display:none;
  
  &:checked ~ {
    label {
      background-color: #f2bb67;
      
      &:after {
        content: 'Gizle';  
      }
    }
    
    .icerik {
      max-height: 500px;
    } 
  }
}
  
label {
  background-color: #7cc086;
  border: 0;
  width: 50px;
  color: white;
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  display:block;
  width: 60px;
  text-align:center;
  
  &:after {
    content: 'Göster';
  }
}

.icerik {
  margin-top: 20px;
  max-height: 0;
	transition: all 500ms ease;
  overflow: hidden;
  background-color: #d5d1c5;
  width: 400px;
  box-shadow: 3px 3px 1px rgba(192,188,177, .9);
  
  h2 {
    margin: 20px 20px 0 20px;
  }

  p {
    margin: 10px 20px 20px 20px;
    line-height: 1.3em;
  }
  
  a {
    color: #818286;
    text-decoration: none;
    display:block;
    text-align: right;
    margin-top: 20px;
  }
}
View Compiled
Rerun