2014-09-03 5 views

Répondre

0

... 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/

Questions connexes