2014-09-03 5 views

ответ

0

... я не знаю точно, что вы имеете в виду, но, возможно, это помогает ->

Если вы используете JQuery вы могли бы сделать это следующим образом:

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'); 
    }); 

}); 

А вот рабочая скрипку для вас: http://jsfiddle.net/AMzfe/