Error in accordion element

Timur Taveev

• May 03, 2025 15:10

Hello

Yesterday I updated my WordPress Multisite to the latest WordPress version and installed the latest versions of Brizy and Pro. Today I noticed that when I click on the accordion element, the tab opens and immediately collapses. I tried saving the page, but it didn't help.

 

link:

https://almazwptemplates.online/spirit-ru/glavnaya-semejnyj-psiholog/

0

• 

  Ariel H.

  • May 05, 2025 10:39

  Hi Timur,

  Thanks for contacting us.

  We're currently working on a fix for the accordion issue, and it should be released soon. As a temporary workaround, please try saving the affected page as a layout and then importing it into a new page. This has worked for other users facing the same issue. It's not an ideal workaround, but it should help for now until we release an update to address the problem.

  Let us know if you need help with the steps.

  Best regards,
  Ariel H.

  0
• 

  Timur Taveev

  • May 14, 2025 11:03

  Hello

  Now I tried to install the latest versions of brizy and brizy pro. This update does not solve the problem with the accordion. The accordion immediately collapses when clicked.

  I do not use a temporary solution to the problem, I have a lot of pages, I can not save the page layout for each page.

  What previous version of the brizy brizy pro plugins can I use? In which versions there is no error in the accordion?

  0
• 

  Ariel H.

  • May 14, 2025 11:42

  Hi Timur,

  Thank you for reaching out. 

  Another user has shared a script that can help fix the accordion issue. To use this solution, you’ll need to install the WPCode plugin, which allows you to insert the script into the footer section of your site.  

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(() => {
        console.log("Using height-based accordion animation...");
  
        // Clone to remove Brizy listeners
        document.querySelectorAll('.brz-accordion__nav').forEach(original => {
          const clone = original.cloneNode(true);
          original.parentNode.replaceChild(clone, original);
        });
  
        const headers = document.querySelectorAll('.brz-accordion__nav');
        console.log("Headers found:", headers.length);
  
        headers.forEach(header => {
          header.addEventListener('click', function () {
            const item = this.closest('.brz-accordion__item');
            const content = item.querySelector('.brz-accordion__content');
            if (!item || !content) return;
  
            const isOpen = item.classList.contains('open');
  
            if (isOpen) {
              // collapse
              content.style.height = content.scrollHeight + "px"; // start at full height
              requestAnimationFrame(() => {
                content.style.transition = "height 0.4s ease";
                content.style.height = "0px";
              });
              item.classList.remove("open");
            } else {
              // expand
              content.style.height = "0px"; // reset first
              content.style.display = "block";
              content.style.overflow = "hidden";
              item.classList.add("open");
              const fullHeight = content.scrollHeight + "px";
              requestAnimationFrame(() => {
                content.style.transition = "height 0.4s ease";
                content.style.height = fullHeight;
              });
            }
          });
        });
      }, 1000);
    });
  </script>

  You can follow the steps demonstrated in this screencast: https://www.youtube.com/watch?v=gT3IXs4J2BU  

  Let me know if you need any assistance with this.

  Kind regards,  
  Ariel H.

  0
• 

  Timur Taveev

  • May 14, 2025 11:53

  Thank you. This code fixes the error.

  0

Please sign in to leave a comment.