Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Is there a way to make accordion content slide from right instead of down?

  • Hi

    Simple question i there a way to make accordion content slide from right to left instead of down from up?
    custom css? or something?

  • Hi there,

    the Accordion uses some Javascript which pretty much bakes in the requirement for a Height transition.
    So i doubt it would work with a width transition.

    If you have a page on your site where i can see your accordions, i can take a look if its possible to overwrite it with some CSS….

  • Hi David,

    I put private link of staging site where i am using accordion as a custom mobile navigation so you need to view it on little bit narrower view. Why would i do that? Well actually GenerateBlocks accordion works very nice as mobile navigation, it’s lightweight very highly customizable visually and i can build content like any block. Only limitation is animation direction and duration othervise it actually works very well.

  • Hmmm…. nice idea and design 🙂 but it has complications.

    For example try this CSS:

    
    .header2 {
        overflow: hidden;
    }
    .header2 .gb-accordion__content {
        display: flex !important;
        z-index: 1;
        max-height: auto !important;
        position: fixed;
        top: 100px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    .header2 .gb-accordion__item-open > .gb-accordion__content {
        transform: translateX(0);
    }
    

    It targets the accordion inside the header2 div.
    And forces it to full height and transforms it in and out of view like the off canvas panel.
    Which requires the accordion_content to have a fixed position so it doesn’t take up any vertical space on the page.

    The problem is you can’t easily fix the body from scrolling as we have no HTML/Body class to observe when the accordions are open. That would need some javascript.

    The Javascript which needs to be hooked into the footer is:

    
    <script>
    
    function mutationCallback(mutationsList, observer) {
    mutationsList.forEach((mutation) => {
        if (mutation.target.classList.contains('gb-accordion__item-open')) {
            document.body.classList.add('custom-menu-open');
        } else {
            document.body.classList.remove('custom-menu-open');
        }
    });
    }
    
    const header = document.querySelector('.header2');
    
    const targetElement = header.querySelector('.gb-accordion__item');
    const observer = new MutationObserver(mutationCallback);
    const config = { attributes: true, attributeFilter: ['class'] };
    
    observer.observe(targetElement, config);
    </script>
    

    This will toggle custom-menu-open class on the body when its open or closed.

    And this CSS will stop it from scrolling:

    
    .custom-menu-open {
        overflow: hidden;
    }
    
  • Thanks David i will give it a try as soon as i have more time. But thank you for your effort.

  • You’re welcome

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