Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Creating FAQ page for a site using AEM components.

Avatar

Level 3

Want to create a FAQ page using AEM components. What all components can be used for the same and how can I achieve their styling manipulation?

I guess I need to add a text field for a question and for answer a text area for answer. How can I add some show hide styling to the answer field?

 

For ex u can see the screenshots below.

Manasi29_0-1650086646947.png

Manasi29_1-1650086786978.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @Manasi29 ,

 

You can use the core accordion component for FAQ page , the following link will help :
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/accordio...

Thanks,

Milind

View solution in original post

2 Replies

Avatar

Correct answer by
Employee Advisor

Hi @Manasi29 ,

 

You can use the core accordion component for FAQ page , the following link will help :
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/accordio...

Thanks,

Milind

Avatar

Level 3

Hi @Manasi29 

 

One approach to add styling to your Accordion is that you can add your own custom sass. For the icons, there are two default classes for normal and expanded view button, you can add icons there. It's better to use your own custom sass.

 

 

.cmp-accordion__button {
content: <here you can add either URL of icon using url(" ") or the variable which you have already defined in your variables sass>;
}
.cmp-accordion__button--expanded {}

 

Defining variables is better approach.