Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

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

Home Forums Support [Resolved] GPP / Block Elements / Hook / Simple Accordion

Home Forums Support GPP / Block Elements / Hook / Simple Accordion

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1965965
    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 -->
    #1966342
    David
    Staff
    Customer Support

    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

    #1966510
    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

    #1966710
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1969263
    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

    #1969293
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1969531
    Jan

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

    Thanks anyway

    #1970235
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.