<body class="fullload">
<div id="content" class="open">
    <div class="inner">
        <h3>SÜT HAVUZU: Hile Yapmamak</h3>
        <p>Bir zamanlar çok zengin bir ülke varmış. Bu ülkenin kralı kocaman ve süslü bir havuz yaptırmış. Bu havuzu sütle doldurtup komşu ülkelere göstermek istiyormuş. 
Tellarlar davullarla sokaklarda dolaşmış. Ülkedekilere haber vermişler:
Güm be de güm güm, güm be de güm güm… Duyduk duymadık demeyin. Kralımız kocaman bir havuz yaptırdı. Bu havuza herkes bir bardak süt dökecek. Bözlece sütle dolu kocaman bir havuzumuz olacak. Başka ülkeler, ülkemizin zenginliğini görecek.
Herkes bu habere çok sevinmiş,merakla havuzu görmeye gitmiş. Havuz kocamanmış. Görenler havuzun güzelliğine hayran olmuş. 
Sonra, sıra havuzu sütle doldurmaya gelmiş. Tellarlar yine sokaklarda dolaşmışlar, 
-Herkes bu gece havuza bir kova süt dökecek,diye duyurmuşlar. Ülkedekiler, o gece ellerinde birer kovayla havuza gitmişler. Kovalarını havuza boşaltmışlar. Ertesi sabah erkenden kral havuzun başına gelmiş. Herkes havuzun başına toplanmış. Fakat birde ne görsünler? Havuzun içi su ile doluymuş! Neden mi? Çünkü herkes ‘’Nasıl olsa kimse anlamaz.’’ Diye düşünüp havuza süt yerine su dökmüş. Kral bunun üzerine.
–Hiçbir hile gizli kalmaz. Mutlaka ortaya çıkar. Bunu hiçbir zaman unutmayız, demiş.Herkes yaptığından utanarak evine geri dönmüş.</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;
}
.fullload * {
    -webkit-transition:none!important;
    -o-transition:none!important;
    -moz-transition:none!important;
    -ms-transition:none!important;
}
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.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js