Tạo Blockquote tự động mở rộng đơn giản với CSS

blockquote.collapsed {
margin:15px 30px;
font:italic normal 18px/1.4 Times,Serif;
height:0;
padding:0 0;
background-color:#FFE046;
border:10px solid #FDD404;
border-left-color:#D7362E;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
overflow:auto;
-webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
transition:all 1s cubic-bezier(1,0,0,1) .5s;
}

blockquote.collapsed:hover {
padding:10px 15px;
background-color:#47AD47;
border:5px solid #156715;
height:300px;
}

Rê chuột vào khung để xem
<blockquote class="collapsed">
Nội dung cần trích dẫn...
</blockquote>