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:
https://app.hubspot.com/design-manager/3851256/modules/27878792674
And below is the CSS and JS code in case someone can just edit the code to and send back to me.
CSS Code of the Module
.hs-accordion__item {
margin: .5em;
}
.hs-accordion__item button {
display: block;
width: 100%;
font-size: 1em;
padding: 1em 3em 1em 1em;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid #ddd;
border-radius: 0;
background-color: transparent;
-webkit-appearance: none;
color: #444;
position: relative;
text-align: left;
font-family: inherit;
}
.hs-accordion__item button * {
pointer-events: none;
}
.hs-accordion__item:last-of-type button {
border-bottom-color: transparent;
}
.hs-accordion__item button:focus {
outline: none;
}
.hs-accordion__item button:hover {
color: #bf1b21;
opacity: .8;
}
.hs-accordion__item[aria-expanded=true] button { /* [aria-expanded=true] means accordion will be 'open' */
color: #bf1b21;
border-bottom-color: #bf1b21;
}
.hs-accordion__item-icon { /* Icon styles */
position: absolute;
height: 1.25em;
width: 1.25em;
right: 1em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 1px solid #a5a5a5;
border-radius: 50%;
-webkit-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
pointer-events: none;
}
.hs-accordion__item-icon:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
height: 1px;
width: .75em;
background-color: #a5a5a5;
}
.hs-accordion__item-icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
height: .75em;
width: 1px;
background-color: #a5a5a5;
}
.hs-accordion__item button:hover .hs-accordion__item-icon {
border-color: #bf1b21;
}
.hs-accordion__item button:hover .hs-accordion__item-icon:before,
.hs-accordion__item button:hover .hs-accordion__item-icon:after {
background-color: #bf1b21;
}
.hs-accordion__item[aria-expanded=true] .hs-accordion__item-icon {
-webkit-transform: translateY(-50%) rotate(135deg);
-ms-transform: translateY(-50%) rotate(135deg);
transform: translateY(-50%) rotate(135deg);
border-color: #bf1b21;
background-color: #bf1b21;
}
.hs-accordion__item[aria-expanded=true] .hs-accordion__item-icon:before,
.hs-accordion__item[aria-expanded=true] .hs-accordion__item-icon:after,
.hs-accordion__item[aria-expanded=true] button:hover .hs-accordion__item-icon:before,
.hs-accordion__item[aria-expanded=true] button:hover .hs-accordion__item-icon:after {
background-color: #fff;
}
.hs-accordion__item main {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: opacity .3s ease-out .2s, max-height .3s ease-out;
-o-transition: opacity .3s ease-out .2s, max-height .3s ease-out;
transition: opacity .3s ease-out .2s, max-height .3s ease-out;
line-height: 1.6;
display: block;
}
.hs-accordion__item[aria-expanded=true] main {
opacity: 1;
max-height: 100%;
-webkit-transition: opacity .5s ease-in, max-height .5s ease-in;
-o-transition: opacity .5s ease-in, max-height .5s ease-in;
transition: opacity .5s ease-in, max-height .5s ease-in;
/*display: block;*/
}
.hs-accordion__item-content {
padding: 2em 1em 1.5em;
}
.hs-accordion__item-content p {
margin-top: 0;
}JS Code of the module
/* 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.
Regards,
Javier
