Customising an accordion

[SantiCazorla]

Hi guys,
I am trying to customise the default accordion. For that, I would need help with:

1. Removing box shadow
2. Removing the gap between boxes
3. Customising the expand button
4. Adding an image.

I have attached an image to make clearer what I am trying to achieve.

I am trying to make my current accordion (#1) look more like accordion #2.

Thanks,

[thai]

Hi @Tsogtbaatar,

To achieve that, please try adding the following CSS under Theme Options > CSS:

.x-acc .x-acc-item {
    box-shadow: none !important;
    border-bottom: 1px solid #f0f0f0;
    margin: 0 !important;
}
.x-acc .x-acc-item:first-child {
    border-top: 1px solid #f0f0f0;
}

.x-acc .x-acc-header-indicator {
    display: none;
}

.x-acc .x-acc-header-content::after {
    content: '\f067';
    font-family: 'FontAwesome';
}

.x-acc .x-acc-header.x-active .x-acc-header-content::after {
    content: '\f068';
}

To add the images, you just need to switch the editor to text > then upload the images:

Hope it helps

[SantiCazorla]

Hi Thai,

Thanks very much.

Can you help me out with some fine tuning:

1. Removing paddings
2. Changing font size and colour

Please see the illustrative image attached:

[thai]

Hi @Tsogtbaatar,

Please also add this custom CSS:

.x-acc .x-acc-header {
    font-size: 20px !important;
    color: #7a7a7a !important;
    padding-left: 0 !important;
}
.x-acc .x-acc-content {
    padding-left: 0 !important;
    border-radius: 0 !important;
}

.x-acc .x-acc-header-text {
    margin-left: 0 !important;
}

Hope it helps

[SantiCazorla]

Fantastic, thanks.

Is it possible to make the expand indicator (-/+) slimmer?

Thanks

[ruenel]

Hello Rearolam,

To make the expand indicator (-/+) slimmer, please make use of this custom css:

.x-acc .x-acc-header-content::after {
    content: '\f067';
    font-family: 'FontAwesomeLight';
}

Please let us know if this works out for you.

[SantiCazorla]

Fantastic Thanks. It works.

[jade]

You’re welcome, Rearolam.