Help with Editing Accordion Toggle Module So Accordion Items Expand and Collapse on Hover

jquant
Member

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.

2020-04-27 08_51_32-Window.png

 

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

0 Upvotes
2 Replies 2
psdtohubspot
Key Advisor

Hi @jquant 

Can you please share Public URL so that I can check the issue and provide you quick solutions?



Thanks!
Ajit Kumar

0 Upvotes
jquant
Member

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:

https://app.hubspot.com/design-manager/3851256/modules/27878792674 

 

Otherwise, could you just edit the CSS code I included before?

 

Best,

Javier

0 Upvotes