• View
  • Source
Panel 1
Panel 1 Content
Panel 1 Content
Panel 1 Content
Panel 2
Panel 2 Content
Panel 2 Content
Panel 2 Content
Panel 3
Panel 3 Content
Panel 3 Content
Panel 3 Content
Panel 4
Panel 4 Content
Panel 4 Content
Panel 4 Content

Handler

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

View

<div id="Accordion1" class="Accordion" style="width:300px;">
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 1</div>
        <div class="AccordionPanelContent">
            Panel 1 Content<br/>
            Panel 1 Content<br/>
            Panel 1 Content<br/>
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 2</div>
        <div class="AccordionPanelContent">
            Panel 2 Content<br/>
            Panel 2 Content<br/>
            Panel 2 Content<br/>
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 3</div>
        <div class="AccordionPanelContent">
            Panel 3 Content<br/>
            Panel 3 Content<br/>
            Panel 3 Content<br/>
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 4</div>
        <div class="AccordionPanelContent">
            Panel 4 Content<br/>
            Panel 4 Content<br/>
            Panel 4 Content<br/>
        </div>
    </div>
</div>