Accordion styling/look and functionality

[Carmel01]

Hi,

I am looking to achieve this styling and functionality with the accordion. It doesn’t have to be exact but as close as possible would be nice.

I’m not the best at CSS and I’m having a hard time knowing what to change.

Here’s a video of the look and functionality.

accordion.mp4 (video)

Any help would be appreciated

[Prasant]

Hello @alanm01,

Thanks for asking.

Please add following CSS under X > Launch > Options > CSS to make required visual changes in accordion element:

.x-accordion-heading .x-accordion-toggle.collapsed {background-color: #3a3838; color: #fff;}

.x-accordion-heading .x-accordion-toggle {background-color: #3bbff5;}

.x-accordion-heading .x-accordion-toggle:hover {color: #fff;}

.x-accordion-heading .x-accordion-toggle {color: #fff;}

.x-accordion-heading .x-accordion-toggle.collapsed:before{float: right; content: "\f078";; color: #fff}

.x-accordion-heading .x-accordion-toggle:before{content: "\f077"; float: right; color: #fff; transform: rotate(1deg);}

You can change the color code as per requirement.

Thanks.

[Carmel01]

Thank you for your reply and help! That worked perfectly

Is there any way to resize the box itself or the font?

[friech]

Hi There,

What do you mean the box? To adjust the accordion content font-size, please add this to Theme Options > CSS

.x-accordion-inner {
	font-size: 120%;
}

Hope it helps,
Cheers!

[Carmel01]

Thanks, that worked!

Ah sorry I think I mean the padding/margin around the text. Can that be adjusted?

[friech]

Hi There,

Please use this custom CSS to adjust the accordion content padding.

.x-accordion-inner {
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
}

Hope it helps,
Cheers!