How do I add an accordion to Generate Sections?

Hi Alan,

Unfortunately the accordion feature requires a third-party plugin for now.

One of our users suggested this one a while back that might be worth a look;
https://wordpress.org/plugins/accordion-blocks/

Hi Leo

Will that work within a "section" ? My whole page is constructed using sections

Thanks,

Alan

Unfortunately not.

There isn't a solution that turns sections into accordions.

Would something like this work?

W3 Schools

Hi Alan,

Yes that should work assuming you've placed the correct class selectors and loaded the script correctly. :D

So basically, you can copy paste the JS and the CSS and add accordion class to the section wrapper so the script properly controls it.

OK that's great. I'm pretty familiar with the css and the classes but how do I add the JS? Do I just copy that exactly as it is and paste it somewhere?

Thanks

OK that’s great. I’m pretty familiar with the css and the classes but how do I add the JS? Do I just copy that exactly as it is and paste it somewhere?

Thanks

You can use Hook Element for this.

Place this code on its code area:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

You then set its hook to wp_footer and set the display rule to the page where accordion sections are. :D

Thanks Elvin

I don't think I've done that before but here goes :-)

Is this correct?

Appearance - Generatepress - Elements - Add New Element - Hook

Put "accordion" in the Title

Copy and paste the script into the area below.

Settings - Hook - wp_footer - Everything else default (Execute Shortcodes unticked, Execute PHP unticked, Priority 10)
Display Rules - Location - Page - My ceiling fan page (exclude and User untouched)

Yes that's correct. You can link me to that pages to check and confirm if the hook is applied. :D

OK I added it but when I look at the webpage I don't have the expand + on the end of each question and the accordion doesn't open. Its right at the end of the page.

My web address is Gold Coast Electrician - Ceiling Fans

I saw this. Is that script suitable for wordpress? Tom mentioned something but I'm not sure if it applies to my one

GeneratePress

The HTML structure doesn't match.

The accordion button is not a sibling of the panel as shown here - https://share.getcloudapp.com/z8uOjNrm

The button shouldn't be wrapped on a <p> element.

I'm not sure where that <p> tag is coming from. I've got the exact code from the W3 Schools website

<button class="accordion">The question</button>
<div class="panel">
<p>The answer</p>
</div>

Sorry I'm not sure what you mean by

"The accordion button is not a sibling of the panel"

That code is exactly what was at W3schools

The reference has this structure:

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Your site has this structure:
https://share.getcloudapp.com/5zuY6gd4

I see that you've tried to correct it but there's still empty <p> tags in between the accordion element and the panel element. These are likely from empty paragraph blocks. Use the list view on Gutenberg to find them and then remove them. https://share.getcloudapp.com/Z4uKXb6W

I just removed all of the html from within that "GeneratePress Section" and pasted the exact html from W3Schools but the result is the same. This is my html in the section.

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Gold Coast Electrician