Perfect Accordion - loading with all items open?

Design help Custom code
1

Hi everyone,

I am using the JS perfect accordion (Perfect Accordion - Webflow) on a client site. Been working fine, however has now decided to load with all the items open, rather than all closed. When I click one item, they all close, if I click the same item again, it opens individually without the others…!

I have replaced the JS from the original resource but no luck.

Any insights out there? I’m stumped! :smiling_face:

Perfect accordion: Perfect Accordion - Webflow

Here is my site Read-Only: [LINK][1]

2

This code should do the job…

// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: false, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
    accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};

const prefix = accSettings.classes
const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
          setTimeout(() => { 
            $('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
          }, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // Open all accordions on page load
      accordionItem.addClass(activeClass);
      accordionHeader.find(`.${prefix.icon}`).addClass(activeClass);
      accordionBody.show();
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});