Design Change of FAQ Section - Prestige Theme

[znb_djs]

Hello, I would like to change design of FAQ section in Prestige theme. Now it looks like below: 

Would like to make it looking like below:

[Made4uo-Ribe]

Hi @znb_djs 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[znb_djs]

Hi, thank you for reaching out 🙂

zenbioni.com
Test@69

[Made4uo-Ribe · Accepted solution]

Thanks for the info, only the faq section of for all the collapsible content? If it is check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.accordion, .accordion:before, .accordion:after {
    border: none;
    border-width: 0; 
    border-style: none; 
}
details.accordion__disclosure.group {
    margin: 5px 0;
    padding: 0 15px;
    background: #F5F5F2;
    border-radius: 20px;  
}
</style>

And save. 

Reuslt:

Note: You can change the background color you like. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[znb_djs]

Thank you very much, it worked for me. I have wanted only for faq, hovewer for all also is perfect. 
I was trying on my own but I give up - do you know what should I add to your code to make fixed height (eg. 50 px) of accordion before opening?