CQ5 accordion component

Question

I am trying to develop a cq5 accordion component following this example. http://www.ryerson.ca/cmssupport/components/components_list/accordion.html

I have written the following code in my jsp file -

for(int j = 0; j<tokens.length; j++){%>
     <div class="accordion">
         <div class="accordion-section">
             <a class="accordion-section-title" href='#'> <%= tokens[j]%></a>
                  <div id='<%= j%>' class="accordion-section-content">
                     <p> <cq:include path="par" resourceType="foundation/components/parsys" /></p>
                  </div>
           </div>
     </div>

The "tokens" has the Panel1,Panel2,Panel3 titles. What do I need to do in the code snippet to get the panel views with an option to drag and drop the component ? Can anybody please help me out in this. I am new to this CQ5.

Thomas Thomas · Accepted Answer · 2015-02-18T07:36:08

The best approach with containers like accordions and tabs is to separate the edit and publish view. In my component I have a cotainer component with a parsys, where I can add accordion/tab items. These item components again have a parsys. In the edit mode they are displayed below each other and only in the preview/publish view they are rendered with the markup the Javascript needs. Here an example on how my combined accordion/tab component looks like in the JSP (using JSTL and a custom controller) to give you some ideas:

<c:choose>
    <c:when test="${isEditMode}">
        <cq:include path="items" resourceType="foundation/components/parsys" />
    </c:when>
    <c:when test="${ctrl.style eq 'tabs'}">
        <div class="tab-navigation" role="navigation">
            <ul role="menu">
                <c:forEach items="${ctrl.items}" var="item">
                    <li role="menuitem"><a href="#${item.id}">${item.title}</a></li>
                </c:forEach>
            </ul>
            <c:forEach items="${ctrl.items}" var="item">
                <div id="${item.id}">
                    <cq:include path="items/${item.path}" resourceType="foundation/components/parsys" />
                </div>
            </c:forEach>
        </div>
    </c:when>
    <c:otherwise>
        <div class="accordion">
            <c:forEach items="${ctrl.items}" var="item">
                <div class="accordionsplit">
                    <a class="accordion-header" href="#">
                        <div>
                            <span>${item.title}</span>
                        </div>
                    </a>
                </div>
                <div class="accordion-content">
                    <cq:include path="items/${item.path}" resourceType="foundation/components/parsys" />
                </div>
            </c:forEach>
        </div>
    </c:otherwise>
</c:choose>

CQ5 accordion component

1 Answers