<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">

ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΘΕΜΑ ΣΑΣ

</div>
<div class="avdhootpanel">
<span class="in">ΤΙΤΛΟΣ ΚΟΥΜΠΙΟΥ</span>
<span class="in" style="display:none;">Expanded Panel</span>
</div>
</div>