Design an accordion in Renew

[PeterSmits]

Hello there,
I want to design the little triangle shaped icons into a bigger “+” in an accordion element in Renew. Also changing the color of it and style the separate borders.
I tried this code in the page itself outside Cornerstone:

[[accordion id=“my-accordion”]
[accordion_item title=“Accordion Title” parent_id=“my-accordion”]Your text here[/accordion_item]
[accordion_item title=“Accordion Title” parent_id=“my-accordion”]Your second accordion text[/accordion_item]
[accordion_item title=“Accordion Title” parent_id=“my-accordion”]Your third accordion text[/accordion_item]
[/accordion]]

It works but I can’t edit it in Cornerstone. Is there another maybe simpler way to work with it?
Because if I want to design it, I have to edit CSS and to be honest, it’s not my strong point.

The page I’m testing it on is www.zekerslagenvoorjetheorie.nl/testpagina
It’s the last item. Can you advice me what I can do best?

Thanks in advance.

[ruenel]

Hello @PeterSmits,

Thanks for writing in!

I would highly recommend that you use v2 accordion element because you have more control over its styling. You can change the borders, box shadow, icon and a lot more. If you are not seeing any of this option, simply go to X > Settings > User Preferences > Advance Mode and set it to “Always On”.

Hope this helps.

[PeterSmits]

Hello,

thanks for your reply.
I know what you mean and that were the settings I already worked with. I was just wondering if I could change the little triangles in the accordion items and how to change their color.

I hope you can help me with that?

[thai]

Hi There,

To change the icon and color of icon:

• Please add the my-acc class to your accordion element first:

• After that add this custom CSS:

.my-acc .x-acc-header-content::before {
    content: '\f138';
    font-family: FontAwesome;
}
.my-acc .x-acc-header.x-active .x-acc-header-content::before {
    transform: translate3d(0,0,0) rotate(90deg);
}
.my-acc .x-acc-header-indicator {
    display: none;
}

The f138 is the FontAwesome code which you can find here: https://fontawesome.com/icons?d=gallery&q=arrow&m=free

Hope it helps

[PeterSmits]

This is it! Thanks a lot.

[thai]

You’re most welcome.

[PeterSmits]

Hey there,

One more question, how can I let an accordion item close automaticaly when I click another item? So that only 1 item is open and readable.

Thanks

[thai]

Hi There,

Please turn on the Enable Grouping option and set the name of group as well:

Hope it helps

[PeterSmits]

Like a charm! Thank you again!

[rad]

You’re most welcome!