[Resolved] GPP / Block Elements / Hook / Simple Accordion

[Jan]

Hi David,

I followed this thread from Tom to embed a simple accordion feature: https://generatepress.com/forums/topic/simple-accordion-feature/

Unfortunately the accordion effect does not work. See screenshot.

May I ask you to take a look and let me know what’s missing?

Many thanks in advance.

Best,
Jan

—

This is…

– the hook I created
– the CSS I added via Customizer
– the classes I added to the page:

<!-- wp:generateblocks/headline {"uniqueId":"2c64fc14","marginBottom":"40","hasIcon":true,"className":"accordion-toggle"} -->
<h2 class="gb-headline gb-headline-2c64fc14 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">Vergangene Veranstaltungen anzeigen</span></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/container {"uniqueId":"2ceb00c1","isGrid":true,"gridId":"ad17e284","width":100,"widthTablet":100,"paddingTop":"0","paddingRight":"30","paddingBottom":"40","paddingLeft":"30","paddingTopTablet":"0","paddingRightTablet":"0","paddingBottomTablet":"30","paddingLeftTablet":"0","borderSizeBottom":"1","borderSizeTopTablet":"0","borderSizeRightTablet":"0","borderSizeBottomTablet":"1","borderSizeLeftTablet":"0","borderColor":"#667780","borderColorOpacity":0.4,"isDynamic":true,"className":"accordion-content"} -->
<!-- wp:generateblocks/headline {"uniqueId":"d4985711","element":"h3","hasIcon":true,"iconColor":"#de7b7b","iconPaddingRight":"0.6","iconPaddingBottom":"0.2"} -->
<h3 class="gb-headline gb-headline-d4985711"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" aria-hidden="true"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z" fill="currentColor"></path></svg></span><span class="gb-headline-text">Seminare Veranstaltungen in Corona-Zeiten</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Während der Pandemie sind sämtliche Veranstaltungen (Vorträge, Workshops und Seminare) leider ausgefallen. Endlich im Herbst 2021 fand folgende Veranstaltung statt:</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/headline {"uniqueId":"7e21f7af","element":"h3","marginTop":"45","marginBottom":"20","hasIcon":true,"iconColor":"#db7965","iconVerticalAlignment":"top","iconPaddingRight":"0.6","iconPaddingBottom":".2"} -->
<h3 class="gb-headline gb-headline-7e21f7af"><span class="gb-icon"><svg aria-hidden="true" height="1em" width="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"></path></svg></span><span class="gb-headline-text">Seminar der GKS vom 29.09. - 03.10.2021 in Nürnberg: "3. Lebensphase"</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Acht Ehepaaren konnten in vier sehr intensiven Tagen alle wesentlichen Punkte bzgl. des Übergangs aus dem Erwerbsleben in die Phase des aktiven Ruhestandes erläutert werden. Ängste konnten minimiert und die Vorfreude gesteigert werden.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/headline {"uniqueId":"ad961e31","element":"h4","marginTop":"0","marginBottom":"15","marginTopTablet":"0","borderSizeBottom":"1","inlineWidth":true} -->
<h4 class="gb-headline gb-headline-ad961e31 gb-headline-text">Persönliche Erkenntnisse</h4>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Wichtig ist, dass in authentischer Form eigene Erfahrung mit dem Ausscheiden aus dem Berufsleben eingebettet in ein klares Konzept (Körper - Geist -Seele) vermittelt und daraus individuelle Planungen bearbeitet werden.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

[David]

Hi there,

doesn’t look like your site is loading jQuery which is required for that script to work.
GP doesn’t load it unless its required and the only theme requirement is if you have the sticky navigation enabled.

Tom provides a PHP Snippet here to force it to load:

https://generatepress.com/forums/topic/shortcode-does-not-show-in-front-end/#post-475755

[Jan]

Hi David,

thanks for getting back. I added tie PHP code snipped to the function.php (see screenshot) of the child theme, cleared the server cache and re-ran the tests:

1) without the sticky header being enabled -> no accordion effect
2) with the sticky header being enabled -> no accordion effect

I’m really sorry to bother you again, but what am I missing here?

Kind regards,
Jan

[Elvin]

Hi Jan,

You may want to consider using vanilla JS script so you don’t have to bother w/ JS.

See sample script here – https://generatepress.com/forums/topic/can-you-please-make-a-recommendation/#post-1838069

[Jan]

Hi Elvin,

thanks for sharing this alternative option. It works well 😉

Just curious why the simple accordion option (https://generatepress.com/forums/topic/simple-accordion-feature/ ) is not working on this site. Any thoughts?

Thanks,
Jan

[Elvin]

I wasn’t able to inspect your site fully to see the errors to be 100% sure but things like this are usually because of a mismatch in DOM structure for the jQuery script to properly things. 😀

Or a jQuery version mismatch.

[Jan]

No worries. I‘ll use the vanilla JS option for my projects going forward.

Thanks anyway

[Elvin]

That’s actually a good thing. That way you don’t have to rely on any script libraries because vanilla JS is native to the browser.

The theme is actually trying to do the same thing. Tom’s trying to convert everything to pure vanilla JS only. 😀

No problem. 😀

[Jan]

Hi David,

just wondering if there is a chance to use two accordions on the same page. I have added the following CSS to the Customizer:

/* GP Accordion css classes */

#toggled-container {
display: none;
}

#toggled-container.show-content{
display: block !important;
}

#toggled-container-2 {
display: none;
}

#toggled-container-2.show-content{
display: block !important;
}

…and the following Hook Element:

<script>

let toggleBtn = document.querySelector("#toggle-btn-2");
let targetElement = document.querySelector("#toggled-container-2");

toggleBtn.addEventListener('click',function(e){
e.preventDefault();
targetElement.classList.toggle('show-content');
});

</script> 

Then I adjusted the HTML to match the names of the new classes (see screenshot)

While the first accordion on the same page is still working fine, the second is not.

What am I missing?

Thanks,
Jan

[Elvin]

Hi there,

It’s because it’s using the same variable name.

Try removing both the scripts and add this one instead.

<script>

let toggleBtn = document.querySelectorAll(".accordion-toggle-btn");

for( i = 0; i < toggleBtn.length; i++){
    toggleBtn[i].addEventListener('click',function(e){
        e.preventDefault();
        var target = '#toggled-container-'+[i];
        var targetElement = document.querySelector(target);
        targetElement.classList.toggle('show-content');
    });
}

</script>

And then remove the IDs toggle-btn-# on the toggle buttons and replace each toggle button with class accordion-toggle-btn

[Jan]

Hi Elvin,

thanks for sharing this alternative.

I replaced the class (see screenshot), added the new hook and removed the old one. The CSS in the Customizer is as follows:

/* GP Accordion css classes */

#toggled-container {
display: none;
}

#toggled-container.show-content{
display: block !important;
}

The new hook is active on the respective site but none of the two accordions won’t open.

Any thoughts on what I may be missing?

Thanks,
Jan

[Elvin]

I missed a part of the code. (I forgot the increment on var target) My bad.

Try this:

<script>

let toggleBtn = document.querySelectorAll(".accordion-toggle-btn");

for( i = 0; i < toggleBtn.length; i++){
    toggleBtn.addEventListener('click',function(e){
        e.preventDefault();
        var target = '#toggled-container-'+i;
        var targetElement = document.querySelector(target);
        targetElement.classList.toggle('show-content');
    });
}

</script>

[Jan]

Hi Elvin,

apologies for the delay. Meanwhile i replayed the script and cleared the cache.

Unfortunately it is still not working ;-(

Could you please take a look once more?

Thanks,
Jan

[Elvin]

Hi there,

This script is meant to toggle contents that have id of toggled-container-# where # is a number.

If you have multiple contents to be toggled, make sure the ID of the contents to be toggled have increments:

Example: The id/anchor should be toggled-container-1, toggled-container-2, toggled-container-3 and so on.

[Jan]

Hi Elvin,

thanks for this clarification.I added the IDs to both accordion elements.

Then I adjusted the CSS accordingly:

/* GP Accordion css classes - Referenzen */

#toggled-container-1 {
display: none;
}

#toggled-container-2 {
display: none;
}

#toggled-container-1.show-content{
display: block !important;
}

#toggled-container-2.show-content{
display: block !important;
}

I’m still not sure, however, where to place the accordion-toggle-btn See screenshot A or B?

Pls let me know.

Best,
Jan

[Author]

Posts