Two columns with different text styles in accordion tool

Hi and what a helpful thread!  Thank you for sharing your knowledge!

When I open the items in my accordion, I would like to see two columns of text : 

1) The one on the left would be a plain text enumeration without background. (My 3 accordion items all have different text lengths).

2) The column on the right would be quoted text in italic with a colored background. 

This is what I have for now... 

Any idea how I could achieve that?    

Hi,

Try adding accordion, then share link to page where you added, we will try code to split text to 2 columns

Here is the page.  I tried adding an image on the right to reach my goal, but ideally, I would just have text on a white background on the left and italic text over an orange background on the right...  

https://groundhog-reed-3m4m.squarespace.com/our-sevices-2

Thanks for your help!

On 12/29/2021 at 8:55 AM, mhbreton said:

Here is the page.  I tried adding an image on the right to reach my goal, but ideally, I would just have text on a white background on the left and italic text over an orange background on the right...  

https://groundhog-reed-3m4m.squarespace.com/our-sevices-2

Thanks for your help!

I see you solved with these code

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

With 2 different background, seems impossible. You can consider using Accordion Plugin, instead of Accordion Block.

Thank you!