[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 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #2078590
    Elvin
    Staff
    Customer Support

    It’s for the additional CSS class(es) of the toggle buttons. ๐Ÿ™‚

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

    #2079361
    Jan

    Hi Elvin,

    I’m really sorry for this back and forth.

    Meanwhile I added the accordion-toggle-btn to the Additional CSS field of of the buttons.

    When I click the accordion button the URL of the page changes to …/page/#toggled-container.

    Just wondering if this shouldn’t rather say …/#toggled-container-# ?

    Please let me know.

    Best,
    Jan

    #2080844
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m seeing a javascript error at the moment.

    Try this, instead:

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

    Haven’t tested this method that Elvin is using, but that should at least fix the error and hopefully make things work as he intended.

    Let us know ๐Ÿ™‚

    #2080970
    Jan

    Hi Tom,

    many thanks for stepping in.

    I added the revised script which makes accordion #2 work just fine. #1, however, would still not open.

    For you orientation, please see screenshot.

    I also checked the HTML anchor, CSS classes and related CSS in the Customizer, all of which seem to align with what Elvin suggested.

    Any thoughts?

    Best,
    Jan

    #2081670
    Tom
    Lead Developer
    Lead Developer

    The count starts at 0, so try toggled-container-0 instead of toggled-container-1.

    #2081869
    Jan

    Hi Tom,

    I’m really sorry for taking this much of your valuable time with this.

    The HTML anchors are now named toggled-container-0 and toggled-container-1.

    The CSS in the Customizer has been adjusted accordingly:

    /* GP Accordion css classes - Referenzen */
    
    #toggled-container-0 {
    display: none;
    }
    
    #toggled-container-1 {
    display: none;
    }
    
    #toggled-container-0.show-content{
    display: block !important;
    }
    
    #toggled-container-1.show-content{
    display: block !important;
    }

    I then cleared the server cache and ran a test in a private session with no luck ;-(.

    When I hover over the first accordion the URL shows in the status bar at the bottom of the browser is domain.com/page/#toggled-container. Not sure whether this should be specific to the number of the accordion -0 or -1 also.

    Any thoughts?

    Best,
    Jan

    #2082695
    Elvin
    Staff
    Customer Support

    Can we modify the code a bit to do some test?

    Can you try this out and let us have a look?

    let toggleBtn = document.querySelectorAll(".accordion-toggle-btn");
    
    for( button = 0; button < toggleBtn.length; button++){
        toggleBtn[button].addEventListener('click',function(e){
            e.preventDefault();
            var target = '#toggled-container-'+button;
    console.log(target);
            var targetElement = document.querySelector(target);
            targetElement.classList.toggle('show-content');
        });
    }

    I can see the code working but the target isn’t coming in properly as it returns this error – https://share.getcloudapp.com/YEuBQGAY

    But it’s strange because the content w/ the appropriate ID is clearly there – https://share.getcloudapp.com/jkumYglK

    So let’s check if the target is correct. Let us know.

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

Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.