Building Accordion Component Using AEM 6.0 Slightly Framework

Front end components :

There are two component's, one is accordion container component and another one is accordion section component, the container component will act as a container for section component's

Accordion Container Component Snippet

<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>

<div id="globalcont">
<div id="header">
<div data-sly-resource="${ @path='container', resourceType='foundation/components/parsys'}">
</div>
<div data-sly-use.acc="com.rz.AccordionContainer" >
<div id="accordion">
<ul data-sly-list.child="${acc.src}" data-sly-unwrap=""><h3>
${child.title}</h3>
<p>
${child.body}</p>
</ul>
</div>
</div>
</div>
</div>

Accordion Section Component Snippet

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

Code base for accordion container component

this is the code base for accordion container component what it does is it will iterate all the child nodes of container component and build custom collection called "AccordionCollection"

The AccordionContainer component extends from WCMUse which is comes with AEM 6.0 slightly framework, the main advantage of this you can get all component related properties ex : getResource()

package com.rz;

import io.sightly.java.api.Use;
import com.adobe.cq.sightly.WCMUse;
import javax.script.Bindings;
import com.day.cq.wcm.api.Page;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ResourceWrapper;
import org.apache.sling.api.resource.ValueMap;
import org.osgi.framework.Constants;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;

import javax.jcr.Node;
import javax.jcr.NodeIterator;
import javax.jcr.PropertyIterator;
import javax.jcr.RepositoryException;
import javax.jcr.Value;
public class AccordionContainer extends WCMUse  
{        

 private static final Logger log = LoggerFactory
   .getLogger(AccordionContainer.class);
    List src = null; 
    @Override 
    public void activate()
    {      
        
  Node rootNode = getResource().adaptTo(Node.class);
  try {
   log.error("Executing handler for try");
   if (rootNode != null) {
    log.error("Executing handler for node" + rootNode.getPath());
    Node par = rootNode.getParent();
    log.error("Executing handler for node" + par.getPath());
    NodeIterator child = rootNode.getNodes();
    while (child.hasNext()) {
     src = new ArrayList();
     Node childnode = child.nextNode();
     log.error("Executing handler for section node"
       + childnode.getPath());
     NodeIterator sectionnode = childnode.getNodes();
     long i = sectionnode.getSize();
     log.error("printing the size " + i);
     
     while (sectionnode.hasNext()) {
      Node node1 = sectionnode.nextNode();
      log.error("Executing handler for child section node"
        + node1.getPath());
      String title = node1.getProperty("sectionTitle")
        .getValue().getString();
      log.error("display the property" + title);
      String body = node1.getProperty("sectionBody")
        .getValue().getString();
      log.error("display the property" + body);
 
       src.add(new AccordionCollection(title,body));
              
     }

    }


   
   }
  } catch (RepositoryException e) {
   log.error("any Error");

   e.printStackTrace();
  }
    }   
    public List getSrc() 
    {       
        return src;  
    }
}

Code base for AccordionCollection component

package com.rz;


public class AccordionCollection {

 private String title;
 private String body;
 
 AccordionCollection(String title, String body){
  this.title = title;
  this.body = body;
 }

   
    public String getBody() {
  return body;
 }
 public void setBody(String body) {
  this.body = body;
 }
 public String getTitle() {
  return title;
 }
 public void setTitle(String title) {
  this.title = title;
 }


 @Override
 public String toString() {
  return "AccordionCollection [title=" + title + ", body=" + body + "]";
 }
  
}

Find the output below