Creating FAQ page for a site using AEM components.

[Manasi29]

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.

[milind_bachani · Accepted solution]

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

[Jangra98]

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.