Handler

<cffunction name="dspCollapsiblePanel" access="public" returntype="void" output="false">
    <cfargument name="Event" type="coldbox.system.beans.requestContext">
    <cfset var spry = getPlugin("Spry",true)>
    <cfset spry.setCollapsiblePanel("collapsiblePanel1")>
    <cfset spry.setCollapsiblePanel("collapsiblePanel2","contentIsOpen:false,duration:10")>
    <cfset spry.setCollapsiblePanel("collapsiblePanel3")>
    <cfset spry.setCollapsiblePanel("collapsiblePanel4","contentIsOpen:false")>
    <cfset spry.setCollapsiblePanel("collapsiblePanel5")>
    <cfset Event.setView("spryExample/collapsiblePanel")>        
</cffunction>
		

View

<div class="CollapsiblePanel" id="collapsiblePanel1">
    <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
    <div class="CollapsiblePanelContent">
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
        Content for Panel 1 goes here!<br />
    </div>
</div>
<div class="CollapsiblePanel" id="collapsiblePanel2">
    <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
    <div class="CollapsiblePanelContent">
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
        Content for Panel 2 goes here!<br />
    </div>
</div>
<div class="CollapsiblePanel" id="collapsiblePanel3">
    <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>
    <div class="CollapsiblePanelContent">
        Content for Panel 3 goes here!<br />
        Content for Panel 3 goes here!<br />
        Content for Panel 3 goes here!<br />
    </div>
</div>
<div class="CollapsiblePanel" id="collapsiblePanel4">
    <div class="CollapsiblePanelTab" tabindex="0">Panel 4</div>
    <div class="CollapsiblePanelContent">
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
        Content for Panel 4 goes here!<br />
    </div>
</div>
<div class="CollapsiblePanel" id="collapsiblePanel5">
    <div class="CollapsiblePanelTab"><a href="#">Panel 5</a></div>
    <div class="CollapsiblePanelContent">
        Content for Panel 5 goes here!<br />
        Content for Panel 5 goes here!<br />
        Content for Panel 5 goes here!<br />
        Content for Panel 5 goes here!<br />
        Content for Panel 5 goes here!<br />
    </div>
</div>