проще самому сделать, тестил в хроме. про других не знаю и без анимации:
<html>
<head>
<style>
body
{
margin: 0px;
}
.block
{
width: 300px;
height: 40px;
position: absolute;
top: 300px;
left: 40px;
border: solid 1px;
}
.content
{
width: 100%;
height: 100%;
position: absolute;
background-color: white;
#border: solid 1px;
}
.runner
{
width: 100%;
height: 60px;
position: absolute;
background-color: white;
bottom: 0px;
overflow: hidden;
cursor: pointer;
}
.strap
{
width: 100%;
height: 20px;
background-color: #00CF00;
border-radius: 6px 6px 0px 0px;
}
.cont
{
width: 100%;
}
.icon
{
width: 16px;
height: 16px;
background-color: green;
position: relative;
top: 2px;
left: 10px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="block">
<div class="runner">
<div class="strap">
<div class="icon"></div>
</div>
<div class="cont">
Википедия свободная общедоступная мультиязычная универсальная интернет-энциклопедия, реализованная на принципах Вики. Расположена на интернет-сайте http://www.wikipedia.org/.
</div>
</div>
<div class="content">my text</div>
</div>
<script>
document.querySelector('.strap').onclick = function ()
{
var cont = document.querySelector('.cont');
var heightContent = cont.clientHeight + 10,
heightRunner = cont.parentElement.clientHeight,
flag = false;
return function ()
{
this.parentElement.style.height = flag ? heightRunner : heightContent + heightRunner;
flag = !flag;
}
}();
</script>
</body>
</html>
