non ho stili. per l'altezza fa tutto lui, il codice è questo

var collapse2=new animatedcollapse("sezione1", 400, false, 'contract');


al click sulla freccia si chiama collapse3.slideit();

Codice PHP:
//Animated Collapsible DIV- Author: Dynamic Drive ([url]http://www.dynamicdrive.com[/url])
//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname"").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divIdanimatetimepersistexpandinitstate){
    
this.divId=divId
    this
.divObj=document.getElementById(divId)
    
this.divObj.style.overflow="hidden"
    
this.timelength=animatetime
    this
.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" "contract"
    
this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId//"yes" or "no", based on cookie value
    
this.contentheight=parseInt(this.divObj.style.height)
    var 
thisobj=this
    
if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
        
animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
        if (!
persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"//Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
            
this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
    
}
    else if (!
persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"//Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
        
this.divObj.style.height=//just collapse content if CSS "height" attribute available
    
if (persistexpand)
        
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divIdthisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(persistexpand){
    
this.contentheight=this.divObj.offsetHeight
    
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
        
this.divObj.style.height=//collapse content
        
this.divObj.style.visibility="visible"
    
}
    else 
//else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
        
this.divObj.style.height=this.contentheight+"px"
}


animatedcollapse.prototype._slideengine=function(direction){
    var 
elapsed=new Date().getTime()-this.startTime //get time animation has run
    
var thisobj=this
    
if (elapsed<this.timelength){ //if time run is less than specified length
        
var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
    
this.divObj.style.height=distancepercent this.contentheight +"px"
    
this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
    }
    else{ 
//if animation finished
        
this.divObj.style.height=(direction=="down")? this.contentheight+"px" 0
        this
.isExpanded=(direction=="down")? "yes" "no" //remember whether content is expanded or not
        
this.runtimer=null
    
}
}


animatedcollapse.prototype.slidedown=function(){
    if (
typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
        
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
            
alert("Please wait until document has fully loaded then click again")
        else if (
parseInt(this.divObj.style.height)==0){ //if content is collapsed
            
this.startTime=new Date().getTime() //Set animation start time
            
this._slideengine("down")
        }
    }
}

animatedcollapse.prototype.slideup=function(){
    if (
typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
        
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
            
alert("Please wait until document has fully loaded then click again")
        else if (
parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
            
this.startTime=new Date().getTime()
            
this._slideengine("up")
        }
    }
}

animatedcollapse.prototype.slideit=function(){
    if (
isNaN(this.contentheight)) //if content height not available yet (until window.onload)
        
alert("Please wait until document has fully loaded then click again")
    else if (
parseInt(this.divObj.style.height)==0)
        
this.slidedown()
    else if (
parseInt(this.divObj.style.height)==this.contentheight)
        
this.slideup()
}


animatedcollapse.dotask=function(targetfunctionreftasktype){ //assign a function to execute to an event handler (ie: onunload)
    
var tasktype=(window.addEventListener)? tasktype "on"+tasktype
    
if (target.addEventListener)
        
target.addEventListener(tasktypefunctionreffalse)
    else if (
target.attachEvent)
        
target.attachEvent(tasktypefunctionref