-
Kim.T
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? -
David
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….
-
Kim.T
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.
-
David
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 afixed
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; }
-
Kim.T
Thanks David i will give it a try as soon as i have more time. But thank you for your effort.
-
David
You’re welcome
- You must be logged in to reply to this topic.