Support » Plugin: Accordion Blocks » How to group accordion items to one accordion element?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    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;
    }
    Thread Starter alf-axel

    (@alf-axel)

    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?

    Plugin Author philbuchanan

    (@philbuchanan)

    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.
    Thread Starter alf-axel

    (@alf-axel)

    I solved it with the following:

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

    Many thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to group accordion items to one accordion element?’ is closed to new replies.