How to group accordion items to one accordion element?

I’m not sure I completely understand the request, but looking at that site, the first item “Weitere Informationen” is actually added via CSS. The rest of the accordion items are just standard accordion items, so nothing special. You’d just add an accordion block for each item in your list.

It looks like the CSS for that first item is:

div.accordion::before {
  content: "Weitere Informationen";
  display: block;
  width: calc(100% - 70px);
  height: 32px;
  background-color: #f7a800;
  padding: 16px 0 0 70px !important;
  background-image: url(https://www.stadtwerke-vlotho.de/wp-content/themes/stw_vlotho/images/accordion_topper.png);
  background-size: 50px 48px;
  background-repeat: no-repeat;
}

Hello Phil,

many thanks for your quick reply.

I only need this first block “Weitere Informationen” before the first accordion item. Not before every item. That′s my problem.

How can I add it to the whole accordion? Not to any single item?

Oh, I see. Two potential options:

• Create a custom style for a “Heading” block. This way you can add the title text in the HTML instead of CSS and style it however you’d like.
• Group all the accordion items in a “Group” block, give that “Group” block a custom CSS class name, then add the “Weitere Informationen” CSS to the “Group” block, instead of the accordions.

I solved it with the following:

div.wp-block-pb-accordion-item:nth-of-type(1)::before

Many thanks for your help!