Accordion Styling

[bdraguts]

Hello X theme support,

Can you help me make my accordion look like the one at this link:

FAQ | Positive Nutrition

With the dark line at the bottom, no outline around the entire box, larger text and icon size, and change in icon?

Thanks!

[basanta]

Hi There,

To make similar kind of accordion, you have to write custom CSS code.
We are really sorry but this is some out side of the theme support scope. You can take help of a developer to make this look.

Thanks for the understanding!

[Prasant]

Hello @bdraguts,

Thanks for asking. As started by my fellow colleague that custom development falls outside the scope of the support we offer. But I can point you in right direction and then you can take it from there to achieve the desired output for Accordion element.

The main container that holds individual accordion elements is .x-accordion-group. You would like to remove the border that is coming from the CSS attached to .x-accordion-group as it forms that outer layer. You can use border: none; to remove the border. After that use border-bottom: 2px solid #e5e5e5; to display border similar to to the demo wesite link you have shared. In that regards as of now your CSS should look like:

.x-accordion-group {border: none; border-bottom: 2px solid #e5e5e5;}

Here is resource that you can refer to learn more about CSS border elements. https://www.w3schools.com/cssref/pr_border-style.asp

Next, to change the icon and to position the collapse icon to right side here is the CSS selector and sample CSS that you can use:

.x-accordion-heading .x-accordion-toggle.collapsed:before{float: right; content: "\f067"; font-size: 1.2em;}

You can refer following article to get list of X Theme icons:

http://demo.theme.co/integrity-1/shortcodes/icons/

To increase the font size of the content, the CSS selector that you should focus on is .x-accordion-heading. I am sharing sample code that you can use as a starting point:

.x-accordion-heading{font-size: 1.4em;} /this will target accordion heading element./

.x-accordion-inner {font-size: 1.2em;} /supposed to target inner content./

Hope that helps you to get started.

Thanks.

[bdraguts]

If my current code for the icon is:

.x-accordion-heading .x-accordion-toggle.collapsed:before{float: right; content: “\f067”; font-size: 1.2em;}

How do I add the x theme icons as described above? For instance, I want to use [x_icon type=“chevron-up”], but that does not work when used to replace “\f067”

[friech]

Hi There,

f067 is the icon Unicode, If you need other icons, please go here (http://fontawesome.io/icons/). Select the icon that you need, get the icon’s Unicode (https://prnt.sc/g66jr4).

Hope it helps,
Cheers!