<body>
<div id="content" class="open">
<div class="inner">
<h3>On Küçük Köpek</h3>
<p>Bir varmış bir yokmuş. Bir zamanlar Eren adında bir çocuk varmış. Eren kırlarda koşup oynamaya bayılıyormuş. Yine bir gün oynamak için kırlara gitmiş. Bu sırada peşine bir köpek takılmış. Zavallı köpek, pek aç görünüyormuş. Yiyecek bir şeyler arıyor, yerleri kokluyormuş. Eren köpeğe acımış,
-Vah vah.. demiş. Keşke sana verecek birşeylerim olsaydı… Köpek acı acı havlamış. Sanki Eren’in söylediklerini anlamış. Birsüre birlikte yürümüşler. Az sonra birde ne görsünler? Karşılarında kocaman bir kemik yığını durmuyor mu?
Eren sevinçle,
-İşte demiş. Senin için yiyecek bir seyler. Hemde sana üç gün yeter. Fakat aç köpek birden geri dönmüş ve koşa koşa oradan uzaklaşmış. Eren buna çok şaşırmış. Bir taşın üstüne oturmuş. ‘Hayvancağız hiç bir şey yemeden nereye gitti?’diye düşünmüş. Çok geçmeden köpek geri dönmüş. Arkasındada zıp zıp zıplayan on küçük köpek varmış. Küçük köpeklere yiyeceği göstermiş. Kendiside bir kenara çekilmiş. On küçük köpek doyana kadar yemiş. Sonra büyük köpeğe teşekkür eder gibi bakmışlar.
İşte ondan sonra büyük köpek, yiyeceğe yaklaşmış. Geride kalan kırıntıları yemiş. Eren köpeğe hayretle bakarak, İnanılmaz! demiş.Köpek bile paylaşmayı biliyor. Başkalarını kendine tercih ediyor.</p>
</div>
</div>
<br />
<button class="button" id="toggle">İşte tıklayın</button>
</body> .transitions {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}
body {
font-family:Arial;
line-height: 3ex;
background-color:#fff;
font-size:16px
color:#444;
}
#toggle {
display:block;
padding:10px;
margin:10px auto;
text-align:center;
width:30ex;
}
#content {
overflow:hidden;
margin:10px;
border:1px solid #bbb;
background:#f0f0f0;
opacity:1;
}
#content .inner {
padding:10px;
overflow:auto;
}
#content .inner h3{
text-align:center;
}
.button{
padding:10px 20px;
margin:5px;
color:#fff;
text-align:center;
border:0;
cursor:pointer;
border-radius:3px;
display:block;
text-decoration:none;
font-weight:400;
box-shadow:inset 0 -2px rgba(0,0,0,0.15);
background:#e74c3c;
transition:all 0.3s ease-in-out;
}
.button:hover{
box-shadow:inset 0 -54px rgba(0,0,0,0.15);
color:#fff;
}
.button:active{
border:none;
outline:none;
box-shadow:none;
}var content = $('#content');
content.inner = $('#content .inner');
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
if(content.hasClass('open')){
content.css('max-height', 9999);
}
});
$('#toggle').on('click', function(e){
content.toggleClass('open closed');
content.contentHeight = content.outerHeight();
if(content.hasClass('closed')){
content.removeClass('transitions').css('max-height', content.contentHeight);
setTimeout(function(){
content.addClass('transitions').css({
'max-height': 0,
'opacity': 0
});
}, 10);
}else if(content.hasClass('open')){
content.contentHeight += content.inner.outerHeight();
content.css({
'max-height': content.contentHeight,
'opacity': 1
});
}
});
External CSS
This Pen doesn't use any external CSS resources.