Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Additional icon in accordion title

  • Hi there,
    I would like to add a “fire” icon at the beginning of the accordion title in addition to the expand icon on the right.
    SVG is `<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg&#8221; width=”32″ height=”32″ viewBox=”0 0 32 32″>
    <path d=”M10.031 32c-2.133-4.438-0.997-6.981 0.642-9.376 1.795-2.624 2.258-5.221 2.258-5.221s1.411 1.834 0.847 4.703c2.493-2.775 2.963-7.196 2.587-8.889 5.635 3.938 8.043 12.464 4.798 18.783 17.262-9.767 4.294-24.38 2.036-26.027 0.753 1.646 0.895 4.433-0.625 5.785-2.573-9.759-8.937-11.759-8.937-11.759 0.753 5.033-2.728 10.536-6.084 14.648-0.118-2.007-0.243-3.392-1.298-5.312-0.237 3.646-3.023 6.617-3.777 10.27-1.022 4.946 0.765 8.568 7.555 12.394z”></path>
    </svg>`
    Is it possible to realize that?

  • Hi there,

    you will need to set the accordion title type to container, instead of button.

    Then you can add an icon to the title headline block.

    For the accordion expand icons, it’s a bit tricky, try following this instruction:
    https://generate.support/topic/accordion-title-expand-button-disappeared/#post-80323

  • OK, but I can use only one icon in the headline block. Would it be possible to add inline code to the accordion title, using the code editor?

  • No, it’s not recommended to edit the headline block in code mode, it might crash the block.

    but I can use only one icon in the headline block

    How many icons do you need? 1 icon for the headline, and 2 icons to close/open the accordion.

    If so, try using a structure like this with 2 headline blocks, and add an additional CSS class to the headline block with no text but 2 icons, eg. icon-headline
    https://app.screencast.com/FB6qll1PL4Fp4

    Then add this CSS:

    .gb-accordion__item:not(.gb-accordion__item-open) .gb-accordion__toggle > .gb-headline.icon-headline .gb-icon svg:last-of-type,
    .gb-accordion__item-open .gb-accordion__toggle > .gb-headline.icon-headline .gb-icon svg:first-of-type {
        display: none;
    }
  • OK. How can I place the open/close icon at the same height as the Accordion title? At the moment it is one line below.

    Screenshot

  • Hi there,

    can you share a link to where i can see that issue ?

  • Hi David,
    Added to the private information

  • Select the Accordion container that has your headline and with the 2 icons inside.
    And in Layout set the Display to Flex

  • Perfect, thank you 🙂

  • You’re welcome

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.