NEED TO KNOW

Frequently
Asked Questions

General
Pricing
Residential
Commercial

NEED TO KNOW

Frequently
Asked Questions

General

What story does your family always tell about you ?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What story does your family always tell about you ?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What story does your family always tell about you ?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What story does your family always tell about you ?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FAQ

Creating the structures

So, as usual, I tried to make the clone as easy as possible to be copied . Just copy the element named, 'Cloneable Area' and rename it or you can copy all the elements within that class.

Both question and answer are placed within the same row and container for easier management.

Main Interactions for expand and collapse

The main interaction involved here is 'Mouse Click (Tap)' that create the animation for expand and collapse. It is targeting the main container of each row, so that user can click on anywhere within the row/container to expand or collapse an item.

Interaction for icon

Using the same interaction trigger as above, I created an animation to rotate and resize the icon to shape it from a plus to minus.

A little touch-up animation for the paragraph that reveals on expand

To make things a little livelier, I added a nice little touch up to the paragraph by creating a slide in animation from below. So, instead of being still upon expand, it will slide in from below nicely.

Additional interaction to create focus/highlight on specific item (Optional)

I added a focus/highlight effect to make the item that's on hover stands out from the rest. This helps the user to focus on the item that they are reading.

This is definitely optional. You can remove this animation from the interaction setting. It's a separate interaction from the expand/collapse.

This way