How to Add Accordion App in Weebly and Customize?

Accordion style elements allow you to add content in a spoiler form thus you can show more content in less space. Good news is that Weebly came up with default accordion element so that you can drag and drop any type of elements like text, image, gallery, etc. within the content space. Though the user experience of using accordion element is not great, it is definitely worth in many scenarios like adding Q&A, FAQ or any type of structured content. In this article we will discuss on how to add accordion app in Weebly and customize it.

Learn more on how to add different styles of accordions in Weebly as a toggle widget with CSS, using Bootstrap accordion component and jQuery.

How to Add Accordion App in Weebly Site?

With the introduction of app center, Weebly offers many new elements and “Accordion” is one such element offered for free. When you are in Weebly editor, click on the “Apps > App Center” to navigate to Weebly App Center.

The Accordion app is available under “Tools” category, click on “More” option available against “Tools” section to view the app.

Click on the “Accordion” app to view the details and user reviews about the app. Since this is an app from Weebly you can expect more customization options in near future to enhance the usability. Click on “Add” button and then “Connect” link to add the element to your site.

Once the element is added, you can view it under “Third Party” category. Like other elements just drag and drop the element to add the accordion to your site.

Customizing Accordion Element

The accordion element contains two parts – title and content. The title is part is a fixed part where you can only add text title and the content part is a drag and drop section where you can add any type of elements like text, image or embed code element. Below is how the accordion element will look like when added on a page:

When clicking on the element the “Settings” popup will appear offering the option to change the background color of the title as well as the content. You will also have other options for adding more items and changing to one of the available style.

At this moment the biggest problem is that once you added the content, there is no way to rearrange it. Hence, decide the sequence beforehand to avoid reworking and hope Weebly or any other developer will come up with more flexible app in the future.

Solutions for Some of the Current Issues

When looking at the user’s reviews we noticed other than content rearranging there are two other fixes required for the app – one is stopping the uppercase transformation of the title and other is having separate color for the title when expanding the title.

Add the below CSS code under “Pages > Choose the page of your Accordion > Advanced > Header Code”:

<style>
.accordion__title {
text-transform: none !important;
}

.accordion__item.active > .accordion__title {
background-color: #A9E5F8 !important;
}
</style>

Now the final accordion element on the published site will look something like below having the title same way you enter (not changed to uppercase though it looks uppercase in the editor when you type) and have different color than the content area.