Это с открытием и закрытием...
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: green;
}
.box {
position: relative;
width: 20px;
height: 20px;
overflow: hidden;
background-color: #ffffff;
}
.pict {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url('http://javascript.ru/forum/images/smilies/unsure.gif');
}
.pict.on {
background-image: url('http://javascript.ru/forum/images/smilies/smile.gif');
}
.text {
padding-top: 20px;
}
</style>
<script type='text/javascript'>
$(function (){
$('.pict').click(function (){
var obj=this.parentNode
if ($(this).hasClass('on')) {
var h=$(obj).find('.pict').height();
$(obj).animate(
{height: h+'px'},
"slow",
"linear",
function () {
var w=$(obj).find('.pict').width();
$(obj).animate(
{width: w+'px'},
"slow",
"linear",
function () {
$(obj).find('.pict').removeClass('on');
}
);
}
);
} else {
$(obj).animate(
{width: '100%'},
"slow",
"linear",
function () {
var h=$(obj).height()+$(obj).find('.text').height();
$(obj).animate(
{height: h+'px'},
"slow",
"linear",
function () {
$(obj).find('.pict').addClass('on');
}
);
}
);
};
});
});
</script>
</head>
<body>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Служба Яндекс.Рефераты предназначена для студентов и школьников,
дизайнеров и журналистов, создателей научных заявок и отчетов —
для всех, кто относится к тексту, как к количеству знаков.
</p>
</div>
</div>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Нажав на кнопку «Написать реферат», вы лично создаете уникальный текст,
причем именно от вашего нажатия на кнопку зависит, какой именно
текст получится — таким образом, авторские права на реферат принадлежат
только вам.
</p>
</div>
</div>
<div class='box'>
<div class='pict'></div>
<div class='text'>
<p>
Текстами рефератов можно пользоваться совершенно бесплатно,
однако при транслировании и предоставлении текстов в массовое
пользование ссылка на Яндекс.Рефераты обязательна.
</p>
</div>
</div>
</body>
</html>
</html>
