Support

Account

Home Forums Front-end Issues Dynamic Accordion from Heading and Paragraph Tags

Unread

Dynamic Accordion from Heading and Paragraph Tags

  • I have one challenge that is confusing my head a little.

    If you look at this Page– https://prnt.sc/M9JDeuRYgyzY

    You will see that it has an Accordion, but we need this Accordion to show Dynamic Content pulled from Post Content.

    So that all Headings within a particular part of the Post Body will be a new Accordion Heading, and all contents below that Heading will form the Accordion Content.

    HOW IT IS SET UP
    I will create a Container, and give it a Class Name of “Post Content”.

    Inside that container, will be an ACF WYSIWYG Editor.

    WHAT IS INTENDED
    I want a code that would help me loop through the ACF WYSIWYG Editor, and pull out all the Headings(H1 to H6) and all Paragraph Text Contents within the WYSIWYG Editor.

    OUTCOME EXPECTED
    All information within this container and WYSIWYG editor needs to be displayed on the frontend as an Accordion dynamically.

    All Headings within this container and WYSIWYG editor will become each Accordion Heading, and all contents below each Heading in this WYSIWYG Editor will be the Accordion Content of each Accordion Heading.

    Example:

    In the container and WYSIWYG Editor, Heading 1 is “What is Product Management”. Then it has contents below it.

    Heading 2 in the container and WYSIWYG Editor is “Product Research”. Then it has contents below it.

    QUESTION
    How can I create a Dynamic Accordion with ACF– which will display every Heading within the specified container, as an Accordion Heading, and the Content below that Heading as the corresponding Content, in a dynamic way: such that the number of Accordion Headings and contents per Post, will be according to the Headings and contents within the specified container in the Post?

    MY THINKING
    You see, I don’t think it is possible to achieve such Dynamic Accordion in this life.

    But at the same time, such statement could be my ignorance talking :blush:

    REQUEST
    Please, if you have any smart way to achieve this with ACF, Please educate me on it.

    2.) Also show me how to make this outcome a Shortcode that I can paste anywhere on my Post or Pages.

    Needing to hear from you soon.

    Regards.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.