Accordion (GP Hook + CSS) w/o plugin

Hi there,

those two links require a password ?

My bad. Sorry David

Hi Jan,

The HTML structure of the blocks doesn't seem correct. The ID is missing.

The container should have an HTML anchor of accordion instead of having a CSS class of accordion-toggle as shown here - https://share.getcloudapp.com/lluNdp4b

This does the trick indeed. Many thanks Elvin for this helping hand. Much appreciated.

Regards,
Jan

No problem. Glad to be of any help. :D

Hi Elvin,

I have replicated the above to another site following the exact same steps:

…set up a GP Hook (see screenshot),
…added the suggested CSS code snipped in the Customizer and
…added the relevant CSS classes / HTML anchor to the respective content elements as follows:

<!-- wp:generateblocks/container {"uniqueId":"6c86e8c0","anchor":"accordion","innerContainer":"full","paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","paddingSyncUnits":true,"isDynamic":true} -->
<!-- wp:generateblocks/grid {"uniqueId":"30943060","columns":1,"isDynamic":true} -->
<!-- wp:generateblocks/container {"uniqueId":"b6568b0a","isGrid":true,"gridId":"30943060","width":100,"paddingTop":"20","paddingRight":"0","paddingBottom":"20","paddingLeft":"0","isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"d4eb19c7","element":"h3","showAdvancedTypography":true,"fontSize":20,"marginBottom":"0","hasIcon":true,"className":"accordion-toggle"} -->
<h3 class="gb-headline gb-headline-d4eb19c7 accordion-toggle"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span><span class="gb-headline-text"><strong>Transkript zum Spickzettels</strong></span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/container {"uniqueId":"a8c3b8e7","paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","paddingSyncUnits":true,"isDynamic":true,"className":"accordion-content"} -->
<!-- wp:list -->
<ul><li>Damit jedoch genug der Vorrede. Lassen Sie uns nun einen Blick in den ersten Spickzettel werden. <em>Woher die Bezeichnung "Spickzettel" kommt wollen Sie wissen?</em> Auch hier der Name Programm. <strong>Spickzettel</strong> haben wir in der Schule geschrieben, wenn wir entweder zu faul oder zu klug für ein Randthema zu lernen waren. Das Problem mit Randthemen ist, Sie haben im Alltag das Gelerntes nur selten anwenden und damit  festigen. Ergebnis: Sie vergessen es schnell wieder. </li><li>Nehmen wir also an, Sie gehören zur Gattung kluger Schüler, Sie wollen nicht zum reinen Online-Unternehmer werden, aber den Online-Kanal dennoch für Ihre Kundenansprache nutzen. Dann notieren Sie Ihre Entscheidungen zum jeweiligen Schritt der Etappe in den <strong>gelben Feldern</strong> und bestehen die "Prüfung", ohne vorher Online-Marketing studieren zu müssen. Klingt effizient? Dann lassen Sie uns loslegen.</li><li>Verstehen Sie den...

When I click on the "Transcript" headline, however, the effect is not being triggered.

What am I missing?

Many thanks,
Jan

I don't see the script being loaded on the page.

Perhaps the display rule is wrong.

Can you try to set the display rule to "Entire site" and see if it runs? For the purpose of testing. Let us know.

Hi Elvin,

I went back and changed the display to "entire site" and re-ran the test successfully.

Then I ran two more tests. One with the display rule set to "all sections" (equivalent to all blog categories) and another one with the display rule set to the initial setting "Anleitungsvideo ansehen" (equivalent to one particular blog category).

To my own surprise it is now working on all levels. On one hand this is good, because the issue disappeared. On the other hand it leaves uncertainty when the exact root cause remains unknown.

Is there any caching involved or other potential causes that you might suspect?

Thanks,
Jan

Is there any caching involved or other potential causes that you might suspect?

It's normally one or all of these:

- Deep cache or page cache on the server-side of things. (some hosts have some sort of page caching).
- Plugin cache.
- CDN cache.

Glad you got it to work now. :D

Will keep that in mind in case the issue pops-up again.

Thanks for your great support.

Best regards,
Jan

No problem. :D