Attaching Javascript to Items Inside of an Accordion

When Foundation Framework accordions are initialized the .accordion-content container is set to display: none. Because display: none removes the elements from the DOM you can’t attach Javascript to them. So if you have a Slick Slider inside of an accordion it won’t initialize.

This code overwrites the Foundation default and sets display to block. It then uses visiblity: hidden and position: absolute to “hide” the .accordion-content container. When the ARIA-hidden attribute changes to false this CSS restores the position of of the .accordion-content container.

The scaling was added to resolve a flash of content when closing the accordion.

.accordion-item .accordion-content[aria-hidden="true"]{
     display: block !important;
     visibility: hidden;
     position: absolute;
     transform: scale(0);
}

.accordion-item.is-active .accordion-content{
     display: block !important;
     visibility: visible;
     position: relative;
     transform: scale(1);
 }

.accordion-item .accordion-content {
     max-width: 465px; /*this can be whatever the width of the accordion-content is */
     overflow: hidden;
 }