Click And Expand Panel Content Box Widget For Blogger

VIEW DEMO

This is one of the best widget that you will find here. This is pretty good widget to summarize the longer part of the webpage. For example you want to share a large collection of photos but you have very little space in your sidebar then you must use this widget. It will hide all the photos but when user clicks on any part of the widget suddenly the panel expands and shows the entire collection of photos.

<style type="text/css">
#avdhoottovik {display:block}

#panel {
background-color:#96BC43;
border:2px solid #a7cc54;
border-width:2px 2px 0 2px;
height:250px;
overflow:auto;
margin:0;
padding:10px;
color:#111;
font:normal 12px Times,Serif;
-webkit-box-shadow:inset 0 0 7px #222;
-moz-box-shadow:inset 0 0 7px #222;
box-shadow:inset 0 0 7px #222;
display:none;
}

.avdhootpanel {
position:relative;
cursor:pointer;
text-shadow:1px 1px 2px #000;
padding:7px 15px;
background-color:#333;
border-top:3px solid #a7cc54;
color:#e5e5e5;
text-align:center;
font:bold 14px Times,Sans-Serif;
font-style:italic;
-webkit-box-shadow:0 -1px 2px #222;
-moz-box-shadow:0 -1px 2px #222;
box-shadow:0 -1px 2px #222;
-webkit-border-radius:0 0 14px 14px;
-moz-border-radius:0 0 14px 14px;
border-radius:0 0 14px 14px;
}

.avdhootpanel:hover {color:#ccc}

.avdhootpanel:after {
content:'';
position:absolute;
top:100%;
margin-top:-10px;
left:5%;
width:0;
height:0;
display:block;
border-width:20px;
border-style:solid;
border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.avdhootpanel').click(function() {
$('#panel').slideToggle('slow');
$('.avdhootpanel span.in').toggle();
});
});
</script>
<div id="avdhoottovik">
<div id="panel">

... type here ...

</div>
<div class="avdhootpanel">
<span class="in">Click And See The Magic</span>
<span class="in" style="display:none;">Expanded Panel</span>
</div>
</div>