Help with Editing Accordion Toggle Module So Accordion Items Expand and Collapse on Hover
Hello,
I'm using the Hubspot Accordion Toggle module to place accordion items in a landing page and now I need help making the accordion items expand and collpase smoothing on hover. Right now each accordion item expands on click and remains expanded until you click the item again..
Here's a screenshot for reference of where I'm at.
Here's the link to the accordion toggle module template in Hubspot:
/* This script simply changes the data attribute 'selected',
but doesn't handle any animation. All animation is done in CSS.
If the target element's 'data-sync' attribute is true, only
one accordion can be opened at a time. */
function buildAccordion(el) {
var accordion = el,
accordionItems = accordion.children,
oneAtTime = accordion.getAttribute('data-sync'),
hideAllItems = function(ex) {
/* Loop through all items and hide them */
Array.prototype.forEach.call(accordionItems, function(el, i){
if (el != ex) {
el.setAttribute('aria-expanded', 'false')
}
});
},
toggleItem = function(el) {
/* Toggle whether item is selected or not */
if (el.getAttribute('aria-expanded') == 'true') {
el.setAttribute('aria-expanded', 'false');
}
else {
el.setAttribute('aria-expanded', 'true');
}
},
clickBind = function() {
accordion.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "BUTTON") {
/* Should only 1 item show? */
if (oneAtTime) {
hideAllItems(e.target.parentNode);
}
/* Toggle the item */
toggleItem(e.target.parentNode);
}
});
},
/* Go time */
init = (function() {
clickBind();
})();
}
var accordions = document.querySelectorAll('.hs-accordion');
Array.prototype.forEach.call(accordions, function(el){
buildAccordion(el); /* Find all instances of '.hs-accordion' and initialize for each of them */
});
Any help and guidance for this is greatly appreciated.
Help with Editing Accordion Toggle Module So Accordion Items Expand and Collapse on Hover
Thank you for the response Ajit, I actually just got this issue resolved by a Hubspot support rep.
Although, I will say that the last piece of this issue would be to make the accordion expand and collapse smoothly, this would add a nice touch. I believe this can be done easily by just editing the transition values in the CSS code, but I just don't have time right now to figure out why it didn't work for me. I included the CSS in the original post.
The only link to the module design template I see that I can share is this: