Orkut like show/hide scraps with jQuery

It will be fun to collapse and expand images on your web pages just like Orkut.com. Believe me its very easy task with help of jQuery. You have to dirty your hands with a bit CSS, but thats tolerable. Lets see how does it look like…:)

Live Demo Download

The complete Code:

<html>
<head>
<title>WebSpeaks.in</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(function()
{
$('#scrap').mouseover(
function()
{
$('.link').show();
}
).mouseout(function()
{
$('.link').hide();
});

$("#show").click(
function()
{
$("#scrap").css('max-height','').show();
$(this).hide();
$("#hide").show();
}
);
$("#hide").click(
function()
{
$('#scrap').css('max-height','100px');
$(this).hide();
$("#show").show();
}
);
});
</script>
<style>
#body{background:#302929 none repeat scroll 0 0;}
#scrap{
width:500px;
padding:5px;
background:#fff none repeat scroll 0 0;
display:block;
position:relative;
overflow:hidden;
}
.link{
text-align:left;
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
display:none;
}
</style>

</head>
<body id='body'>
<div align='center'>
<div id='scrap' style="max-height:100px;">
<img src='4.gif' id='img'>
<div class="link" >
<a href="#" id="show">show</a>
<a href="#" id="hide" style="display:none;">hide</a>
</div>
</div>
<div>
</body>
</html>

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

2 thoughts on “Orkut like show/hide scraps with jQuery

Comments are closed.