How can do this style accordion

The task is to make this kind of accordion

The fact is that now it only works this way

there is also a problem with the indentation between tabs, if you set the title, then the indent will be applied to the drop-down text, if you add to the drop-down text, this no longer makes sense, It would be great to add the ability to indent between tabs (as in Elementor)

I’ve managed to make it this way…

PS Or you can create Section Template with content, style it and past short-code to Accordion content.

no, you just add icon, see that the question and answer are in the same rounded rectangle and the position of the heading closed with the same rounded corners

Something like this:

and you managed to make such a style for several tabs and the distance between them? I know how you did it in additional stroke and indent styles, and I was able to do this, only if you copy the widget several times it hurts optimizations

I can do this like that but is not good for optimization, I checked it adds one extra div every time, but in general, yes, this can be done

No additional div… Just play with a border for title and content…

I understand you are working with an active and inactive title + content, add a stroke only where necessary so that it does not duplicate, but there is flickering during animation and this is not good, I will attach a screencast of 2 different results

Hi @davidovmihail,

simply add the “global styling” around the whole element via custom css instead of fiddling around with the borders on title and content. That will make it a lot easier. The only thing i added in the settings are the icons and icon rotation. Also, check the “real” frontend (not the builder preview) if it works properly.

root .accordion-item {
  margin-bottom: 2rem;
  border: 1px solid red;
  border-radius: 6px;
  padding: .75rem 1.5rem

root .accordion-subtitle,
root .accordion-content-wrapper {
  margin-left: 22px;

@tole011 Patience and calmness +1 :sweat_smile:

Yeah, this looks good, i try this, if with color background will be works great I will be very happy. as I strive to shorten the code. Thank you for your reply

This works perfectly. There should be settings for item wrapper. Thanks, @timmse.

1 Like

I tried adding code to my custom code plugin so that everything would be global and even change the code and everything works fine. Thank you

1 Like