Reorder component populated accordion | Community
Skip to main content
C
culver-king
Level 2
November 13, 2023
Solved

Reorder component populated accordion

  • November 13, 2023
  • 2 replies
  • 1974 views

I have an Accordion component with ~19 tabs. I need to add a new one which isn't a problem. I order them in the details/edit modal for the parent accordion. However, when I do that its only reordering the `TITLES` of the accordion not the components along with it.

Each of these tabs have sometimes dozens of components or even nested accordions.

Is there a way to move the entire layout container for a tab and easily reorganize the order of the Accordion when adding/subtracting tabs? It doesn't seem to work easily, I have to move a manually selected set of components and scroll.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sady_Rifat

Actually, I used an AEM core component example, which is under http://localhost:4502/sites.html/content/core-components-examples/library 

It might not be present in your local, yet you can also see the same thing in the we-retail project. 

 

Also, I used Touch UI. You might be confused with tree structure. That is why I recorded a video on how the core accordion component can solve your problem.

Screen Record: https://www.loom.com/share/57e18be2879a47f6a3457522df48b64d?sid=39c4ec2b-92a5-4d02-a586-0d16583f3b70 

2 replies

Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
November 14, 2023

Hello @culver-king ,

In AEM Core component implementation, when you reorder an Accordion Item, it will automatically move its entire container. You don't need to manually reorder it each time after sorting from the author dialog.

 

Correct me if I misunderstood your problem.

 

    C
    culver-kingAuthor
    Level 2
    November 14, 2023

    Yes, you are understanding the question, but when I use the author dialog in touch UI it does not move the container contents after reordering the tabs, only the titles and content stays in the original order.

    I haven't used it in the tree/classic mode you're showing in your second screenshot. Not sure if that's accessible in my organizations implementation.

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity AdvisorAccepted solution
      Community Advisor
      November 14, 2023

      Actually, I used an AEM core component example, which is under http://localhost:4502/sites.html/content/core-components-examples/library 

      It might not be present in your local, yet you can also see the same thing in the we-retail project. 

       

      Also, I used Touch UI. You might be confused with tree structure. That is why I recorded a video on how the core accordion component can solve your problem.

      Screen Record: https://www.loom.com/share/57e18be2879a47f6a3457522df48b64d?sid=39c4ec2b-92a5-4d02-a586-0d16583f3b70 

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        November 14, 2023

        @culver-king Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...