Change background color of a collapsible line in a script

[Danielpochapski]

Hey guys.

How do I change the background color of the “Especificações do Produto” collapsible line from white to the same color as the “Descrição Completa”? (The color I would like is #E0E9E4)

Thanks!

My website is: smartcasashop.com.br

Scrpt code:

{%- if product.metafields.info.collapsible_description == true -%}

{{ product.description | split: '' | first }}

{% render 'icon-accordion', icon: 'clipboard' %}

Especificações do Produto

{% render 'icon-caret' %}

{{ product.description | split: '' | last }}

{%- else -%}

{{ product.description }}

{%- endif -%}

[made4Uo]

Hi @Danielpochapski ,

I understand that you want to make the first accordion background changed. Please follow the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

.product__accordion.quick-add-hidden:nth-child(1 of .accordion) {
    background-color: #E0E9E4;
}

See result:

[Danielpochapski]

Thanks for the response.

Although your solution works, I ran into a problem. I don’t know how difficult it is to solve:
The collapsible line color has indeed changed. However, when the collapsible line is open, I would like the background color to be white; Only the title remained “grey”. Is it possible to find any solution for this?

[Danielpochapski]

@made4Uo