Orkut like show/hide scraps with jQuery ~ Web Speaks

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>

Orkut like show/hide scraps with jQuery

The complete Code:

2 comments