How can do this style accordion

Feature Requests / Improvements
1

The task is to make this kind of accordion

image
image2560Ă—1440 195 KB

The fact is that now it only works this way

image
image2560Ă—1440 170 KB

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)

2

I’ve managed to make it this way…

image
image1637Ă—775 30.6 KB

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

3

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

4

Something like this:

5

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

6

image
image2560Ă—1440 274 KB

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

7

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

image
image1911Ă—918 34.1 KB

image
image1908Ă—926 46.6 KB

8

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

faq animation
faq animation692Ă—388 384 KB

9

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.

accordion-settings
accordion-settings652Ă—754 26.8 KB 

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:

10

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

11

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

1 Like
12

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