Accordion

Accordion Default Example

At first we have shown our accordion default example here. Just you can insert this element then you can change setting as you need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Icon Change Example

In this part we have shown our accordion Icon Change example. Just you can insert this element then you can change icon as your choose.

Accordion With Icon List
Heart Beat System

A wonderful serenity has taken possession of my entire soul.

Women With Dumbbell

A wonderful serenity has taken possession of my entire soul.

Stationary Bike

A wonderful serenity has taken possession of my entire soul.

Proteins Products

A wonderful serenity has taken possession of my entire soul.

Accordion With Food Recipe

Visit Our Food Recipe

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot

UX Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

All Item Collapsible (No) Example

Here we have shown our accordion All Item Collapsible example. Just insert this element then you can set (yes/no) Collapsible.

Online Shopping Policy

Personal Shopping System

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Multi Open Example

In this part we have shown our accordion multi open example. Just you can insert this element then you can set multi open (yes/no) as your choose.

Gymkhana Instrument Here
Heart Beat System

A wonderful serenity has taken possession of my entire soul.

Women With Dumbbell

A wonderful serenity has taken possession of my entire soul.

Stationary Bike

A wonderful serenity has taken possession of my entire soul.

Proteins Products

A wonderful serenity has taken possession of my entire soul.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Active Item Number (3) Example

Here we have shown our accordion active item no (3) example. If you want you can set any number of item active as your choose.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Active Background and Color Example

In this part we have shown our accordion Active Background and Color example. If you want you can set active background color and text color as your choose.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Content Background Color Example

This section we have shown our accordion Title Background and Content Background Color example. If you want just you can set those background color  as your choose.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Item Spacing (30px) Example

Here we have shown our accordion item spacing (30px),  Item title border, Icon color and Icon Alignment example. If you want you can set as your need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Title Shadow Example

In this section we have shown our accordion Title shadow example. Just you can insert this element then you can set title shadow as your need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Border Example Example

Here we have shown our accordion Title Border  and Content Radius example. Just you can insert this element then you can set title shadow as your need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Icon Normal and Active Color Example

In this section we have shown our accordion normal and active icon color example. Just you can insert this element then you can set icon color  as your need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Gradient Example

In this section we have shown our accordion gradient example here. Just you can insert this element then you can set gradient color as you need.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Transparent Example

At last we have shown our accordion example with background transparent example here. Just you can insert this element then you can set accordion background color transparent.

Web Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphics Design Showcase

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ux Design Experiences

I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Want to see how accordion widget works?