Handler

<cffunction name="dspCollapsiblePanelGroup" access="public" returntype="void" output="false">
    <cfargument name="Event" type="coldbox.system.beans.requestContext">
    <cfset var spry = getPlugin("Spry",true)>
    <cfset spry.setCollapsiblePanelGroup("collapsiblePanelGroup1")>
    <cfset Event.setView("spryExample/collapsiblePanelGroup")>        
</cffunction>
		

View

<div id="collapsiblePanelGroup1" class="CollapsiblePanelGroup">
    <div class="CollapsiblePanel">
        <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 />
            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">
        <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">
        <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">
        <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">
        <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>
</div>