Help Center
    Help Center
  1. Creating your site
  2. Using Editor X
  3. Adding elements in Editor X
    4. Editor X: Adding and Customizing an Accordion

Editor X: Adding and Customizing an Accordion

5 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Use the Accordion element to show a large amount of content in a small space. By allowing visitors to expand and collapse items, they can easily find the information they need without having to scroll through a long list.
A GIF showing an example of the Accordion element in an Editor X site
In this article, learn how to:

Adding an Accordion element

Select an Accordion design you like to get started. You can personalize each item in your Accordion to show your content. Add the elements you need and organize them however you want inside the container. 

To add an Accordion element:

  1. Click Add Elements  at the top of Editor X.
  2. Click Layout Tools.
  3. Click Accordion.
  4. Drag an Accordion you like onto your page. 
  5. Edit the content of each Accordion item:
    1. Click the Accordion element in your Editor.
    2. Click Manage Items.
    3. Click the item you want to edit. This opens the item so you can see what it currently shows.
    4. Add the relevant elements and information to your item.
A screenshot of the Add Elements panel where you can add a new Accordion element

Adding and managing Accordion items

Manage the items that appear in your Accordion element. You can add more items for your content, give them new titles and change their order of appearance.

To add and manage Accordion items:

  1. Click the Accordion element in your Editor.
  2. Click Manage Items.
  3. Hover over the item and click the More Actions icon .
  4. Choose what to do with this Accordion item: Duplicate, Rename or Delete.
Tips:
  • Click Add Item at the bottom of the panel to add a new blank item.
  • You can change the order of your items. Hold the Reorder icon  next to an item and drag it to the desired location.
A screenshot of the Manage Accordion panel where you can add, rename, duplicate, delete and reorder items

Choosing how the Accordion opens and closes

Decide how your Accordion looks when visitors load the page. You can have all items open so the information is easily accessible, or closed for a more minimal look. You can also choose whether or not visitors can open multiple items at the same time.  

To choose how the Accordion opens and closes:

  1. Click the Accordion element in your Editor.
  2. Click the Settings icon .
  3. Select an option under Choose the default state:
    • All items closed: Visitors first see the Accordion items closed. They choose which item to expand to read more.
    • First item opened: Visitors see the content of the top item while the other items are closed.
    • All items opened: Visitors see the content of all items when the page loads. 
  4. Click the Allow multiple open items toggle:
    • Enabled: Visitors can have as many open items as they like in the accordion. 
    • Disabled: Visitors can only open one item at a time.
  5. (Optional) Add a transition effect that appears when visitors click an item to open it.
A screenshot of the Accordion Settings panel, where you can set how it opens and closes

Designing an Accordion

You can design every part of the Accordion so it matches the rest of your page. Customize the item titles, the containers that show the content of each item, or the entire space of an item (title and container included).

To design an Accordion:

  1. Click the Accordion element in your Editor.
  2. Click the Inspector icon  at the top of Editor X.
  3. Click the Design tab .
  4. Choose what you want to design from the drop-down:
    • Titles: These are the titles of your items. You can design the titles to look different when visitors hover over them. 
    • Containers: These are the containers that show the content of each item.
    • Accordion items: This controls the entire space of an Accordion item (title and container included).
  5. Use the available options to pick different backgrounds, fonts, corners, borders and more.
A screenshot of the Design tab in the Inspector, where you can design the Accordion element

Adjusting the Accordion layout

Adjust the layout of the Accordion element to your needs. You can choose the alignment, padding and position of your item titles, as well as the icon that appears next to each title.

To adjust the Accordion layout:

  1. Click the Accordion element in your Editor.
  2. Click the Layout icon .
  3. Adjust the layout of the Accordion element:
    • Choose an icon: Select the icon that appears next to your item titles: Arrow or Plus. 
    • Icon position: Decide if the icon appears to the left or right of your titles. 
    • Title padding: Drag the sliders to add horizontal and vertical padding around the item titles. 
A screenshot of the Accordion Layout panel in Editor X
Tip:
Each item comes with a built-in 1x1 grid that you can adjust to your needs. Add more rows and columns to create your pixel perfect layout.

Did this help?

|
In this article
  • Adding an Accordion element
  • Adding and managing Accordion items
  • Choosing how the Accordion opens and closes
  • Designing an Accordion
  • Adjusting the Accordion layout

Related content

Editor X: Adding and Customizing Tabs

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched