Accordionv1

Accordion allows users to toggle panels of related content. Panels of varying component type can be created.

Using Core Components

Adobe Help Center

Examples

Standard

Accordion with three items with each item being a layout container.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184683802,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=23,MILLISECOND=802,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184711267,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=51,MILLISECOND=267,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    7. 




    
        

    



    

        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    


    





    

    


    JSON

Sample Content

Accordion with three items with each item being a layout container and containing sample content.

Lava flowing into the ocean

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Snowy mountain glacier

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Aerial photo of mountain range

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184680617,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=20,MILLISECOND=617,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184730691,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=12,SECOND=10,MILLISECOND=691,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    7. 




    
        

    



    

        

            
        

        





    
    



    
        
            
            Lava flowing into the ocean
            
        
    
    
    



    







    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.





    




    






    



        

            
        

        





    
    



    
        
            
            Snowy mountain glacier
            
        
    
    
    



    







    
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.





    




    






    



        

            
        

        





    
    



    
        
            
            Aerial photo of mountain range
            
        
    
    
    



    







    
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.





    




    






    


    





    

    


    JSON

Expanded Item

Accordion with three items with the item expanded by default being the first item.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184680617,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=20,MILLISECOND=617,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184730691,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=12,SECOND=10,MILLISECOND=691,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        expandedItems:
        item_1
    
    7. 

  7. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    8. 




    
        

    



    

        

            
        

        



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.





    





    



        

            
        

        



    
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.





    





    



        

            
        

        



    
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.





    





    


    





    

    


    JSON

Expanded Items

Accordion with three items and all items expanded by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184680617,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=20,MILLISECOND=617,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184730691,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=12,SECOND=10,MILLISECOND=691,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        expandedItems:
        item_1,item_2,item_3
    
    7. 

  7. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    8. 




    
        

    



    

        

            
        

        



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.





    





    



        

            
        

        



    
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.





    





    



        

            
        

        



    
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.





    





    


    





    

    


    JSON

Single Expansion

Accordion with single expansion enabled, which forces a single item to be expanded at a time. Expanding one item will collapse all others.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184680617,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=20,MILLISECOND=617,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544184730691,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=12,SECOND=10,MILLISECOND=691,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        expandedItems:
        item_1
    
    7. 

  7. 
        singleExpansion:
        true
    
    8. 

  8. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    9. 




    
        

    



    

        

            
        

        



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.





    





    



        

            
        

        



    
Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.





    





    



        

            
        

        



    
Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.





    





    


    





    

    


    JSON

Nested

Nested accordions, with each item containing an accordion component in its layout container.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        jcr:lastModifiedBy:
        admin
    
    4. 

  4. 
        jcr:created:
        java.util.GregorianCalendar[time=1544184689790,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=11,SECOND=29,MILLISECOND=790,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    5. 

  5. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1544185541269,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=11,WEEK_OF_YEAR=49,WEEK_OF_MONTH=2,DAY_OF_MONTH=7,DAY_OF_YEAR=341,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=1,HOUR_OF_DAY=13,MINUTE=25,SECOND=41,MILLISECOND=269,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        sling:resourceType:
        core/wcm/components/accordion/v1/accordion
    
    7. 




    
        

    



    

        

            
        

        





    
    



    

        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    


    





    






    



        

            
        

        





    
    



    

        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    


    





    






    



        

            
        

        





    
    



    

        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    



        

            
        

        





    
    
    






    


    





    






    


    





    

    


    JSON

Built with Core Components 2.8.0.