Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 12px Georgia,Serif;
  color:#FDD404;
  text-shadow:1px 1px 1px #000000;

  text-align:justify;

  height:0px;
  padding:0px 0px;
  background-color:#333333;
  border:10px solid #222222;
  border-left-color:#662222;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#333333;
  border:5px groove #222222;
  height:auto;
}

Proses aktivasi bisa dilakukan dengan cara menambahkan class="collapsed" pada elemen <blockquote> yang Anda inginkan:

<blockquote class="collapsed">
    Konten di sini...
</blockquote> 

Lihat Contoh dibawah ini :

text-align:justify : dapat diganti dengan right untuk rata kanan, dan center untuk ditengah
height:auto : tinggi blockquote dapat dirubah sesuai dengan keinginan sobat
background-color : sesuaikan dengan keinginan sobat dan lain sebagainya. Selamat Mencoba...!!!