... Je ne sais pas exactement ce que vous voulez dire, mais peut-être cela aide ->
Si vous utilisez jQuery, vous pouvez le faire comme ceci:
HTML
<div class="container">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
<div class="container collapsed">
<div class="header">Bla blah</div>
<div class="content">
<p> Some content here </p>
</div>
</div>
CSS
.container{
width:300px;
background:#ccc;
margin:10px;
float:left;
}
.header{
background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
background-position:right 0px;
cursor:pointer;
}
.collapsed .header{
background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
}
.content{
height:auto;
min-height:100px;
overflow:hidden;
transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
}
.collapsed .content{
min-height:0px;
height:0px;
}
JS
$(function(){
$('.header').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
Et voici un violon de travail pour vous: http://jsfiddle.net/AMzfe/