Dynamic Accordion with Loops & Logic

  • Resolved gbordormor22

    (@gbordormor22)


    8 months, 4 weeks ago

    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”.

    WHAT IS INTENDED
    All information within this container needs to be displayed on the frontend as an Accordion dynamically.

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

    Example:

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

    Heading 2 in the container is “Product Research“. Then it has contents below it.

    QUESTION
    How can I create a Dynamic Accordion with LOOPS & LOGIC— 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 ??

    REQUEST
    Please, if you have any smart way to achieve this with LOOPS & LOGIC, 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 replies (of 1 total)

  • Hi @gbordormor22, it looks like you’ve already got some good responses on your identical post in the Facebook group. Building a dynamic accordion in L&L is going to be exactly like building a standard HTML accordion, but instead of specifying each accordion row manually as you would if you were working with plain HTML, you’d create a single accordion item, wrap it in an L&L Loop tag, and then replace the static content with L&L’s dynamic tags like Field. So if you used something like this example as your starting point, you’d instead write something like this in your template instead of the static HTML, with the query parameters and tags changed based on your data:

    <Loop type=post count=5>
  <button class="accordion"><Field title /></button>
  <div class="panel">
    <p><Field excerpt auto=true words=35 /></p>
  </div>
</Loop>

    The real challenge here is this part of your request:

    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.

    L&L can easily loop through data that are saved on your site in an array, but the content field in WordPress is just one big block of text. L&L does have the ability to use regex to match a pattern and return an array, which you could theoretically then loop through, but it’s somewhat limited, and getting your regex to work reliably is going to be a massive pain.

    The way I’d approach this would be to use something like ACF to add this data to a separate field, such as a repeater field, and then use L&L to loop through that ACF repeater.

    Alternatively, I’d simply use a tool like SimpleTOC to achieve this since it’s designed to work with headings and content within a WordPress post’s content field.

    I hope that helps point you in the right direction as to how/if to use L&L to accomplish this!

    Also, I can see that you’re already aware of this, but I thought I’d highlight that there’s an L&L support forum that’s browsed by a lot more people than this official WordPress directory forum so in the future, that might be a good place to request help if you want broader community input.

Viewing 1 replies (of 1 total)
  • The topic ‘Dynamic Accordion with Loops & Logic’ is closed to new replies.