0

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.

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.