Increasing Accordion Dropdown Layers with Custom JS/ Custom CSS

[user4494]

Greetings all! I have the task of changing the accordion style FAQ such that each title also has a button that collapses the answer section below it, much like how the answers do. I am attempting to do this through JavaScript, or CSS. I am not getting the correct results, though I am just recently learning JavaScript and revisiting CSS/HTML from long ago in my college career so the code may be wrong. Here is my JavaScript code:

document.addEventListener(‘DOMContentLoaded’, function () {
// Select all the FAQ title spans
const titles = document.querySelectorAll(‘.eapps-faq-content-category-title-text’);

titles.forEach(title => {
title.addEventListener(‘click’, () => {
// Find the next sibling container (FAQ content) after the title
let content = title.parentElement.nextElementSibling;

  if (content) {
    // Toggle visibility of the content
    const isVisible = content.style.display === 'block';
    content.style.display = isVisible ? 'none' : 'block';
  }
});

});
});

Here is the FAQ page: https://www.tellco-europe-news.com/faq

I have to learn JS as well, I have just started if anyone has some good websites/ books for learning JS that would be wonderful as well. Thanks!

[Max]

Hey there, @user4494 and welcome to the Community

Our devs will be happy to customize the widget for you! I’ve passed your request on to them and will let you know once the solution is ready

[user4494]

Thanks! Where will I receive notification of the completed solution? I’d love to see how they accomplish this task, because I have others I would like to accomplish myself as well.

[Max]

Hi there, @user4494

I’ll share the solution in this thread, and you’ll receive a notification to your email address

[Max]

@user4494 The solution is already here!

Please add this code to the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            res(component);
        } else if (i !== 50) {
            setTimeout(check, 100);
            i++;
        }
    };

    check();
});

const handleCategories = (categories) => categories.forEach(category => {
    let isVisible = false;
    const title = category.querySelector(".eapps-faq-content-category-title");
    
    title.addEventListener("click", () => {
      isVisible = !isVisible;
      
      if (isVisible) {
        category.classList.add("eapps-faq-content-category-active");
      
        return;
      }
      
      category.classList.remove("eapps-faq-content-category-active");
    });
});

waitForElement(".eapps-faq-content-items").then(items => {
  const callback = (mutationList) => {
    mutationList.forEach(({ addedNodes }) => {
      handleCategories(addedNodes);
    });
  };
  
  const observer = new MutationObserver(callback);
  observer.observe(items, { childList: true });
  
  handleCategories(items.childNodes);
  
  const style = document.createElement("style");
  style.innerHTML = `
    .eapps-faq-content-category .eapps-faq-content-category-items {
      transition: max-height 0.2s ease, opacity 0.2s ease;
    }
  `;
  document.body.append(style);
});

And this code should be added to the Custom CSS field on the Appearance tab of your widget’s settings:

.eapps-faq-content-category {
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
  cursor: pointer;
}

.eapps-faq-content-category-items {
  max-height: 99999px;
}

.eapps-faq-content-category-title {
  margin: 0 !important;
  padding: 20px 0;
  position: relative;
}

.global-styles,
.eapps-faq:not([class*='Preview']) .eapps-faq-content-category:not(.eapps-faq-content-category-active) .eapps-faq-content-category-items {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.eapps-faq-content-category-title::after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(185, 185, 185);
  transition: background 0.2s ease;
  width: 10px;
  height: 2px;
  top: 50%;
  right: 40px;
  transform: rotate(45deg) translateX(-4px);
}

.eapps-faq-content-category-title::before {
  content: '';
  display: block;
  position: absolute;
  background: rgba(185, 185, 185);
  transition: background 0.2s ease;
  width: 10px;
  height: 2px;
  top: 50%;
  right: 40px;
  transform: rotate(-45deg) translateX(4px);
}

.eapps-faq-content-category-title:hover::after {
  background: #000;
}

.eapps-faq-content-category-title:hover::before {
  background: #000;
}

.eapps-faq-content-category-active .eapps-faq-content-category-title::after {
  transform: rotate(135deg) translateX(4px);
}

.eapps-faq-content-category-active .eapps-faq-content-category-title::before {
  transform: rotate(45deg) translateX(4px);
}

Try it out and let me know if you like the result

[user4494]

Thank you! The result is perfect!

[Max]

Awesome, you’re always welcome!

In the meantime, we’d be so grateful if you could look through the FAQ category on the Wishlist and upvote the ideas you like most. Your feedback helps us move in the right direction.

And don’t hesitate to add your own ideas - we’ll gladly discuss them with you

[user4494]

Hey @Max ! I have another request for your devs! I have a popup ad widget, but I want to modify it such that it opens up only when the user has scrolled down to a certain portion of the page that has the element with these html tags: span class=“elButtonMainText elButtonText”>Click Here To Learn More About Our Pricing Package</span. Thanks! Please let me know what more information you need. I also do not have access to the main email on this account, if you could just contact me through victor.a.minin@gmail.com, or more preferably through responses on this post. Thanks!!

[Max]

Hi there, @user4494

For this, you just need to open the Triggers section on the Settings tab, choose On Scroll to Element and add HTML Element ID:

This article (first 3 steps) explains how you can find your HTML Element ID. Check it out and let me know if it worked

If any difficulties come up, please send me a link to the page where your Popup widget is installed. I’ll be happy to look into this!