Tabs changing colour while scrolling, dont know why

Design help Animations & Interactions
1

Can anyone help me figure out what’s causing this tabs buttons to change colour while scrolling,please? Its driving me crazy because I cant figure it out. When I inspect it, I see its being changed to current but nothing in webflow is set up to do so. It also doesnt show up in webflow preview only when the site is published. Same thing is happening on the tabs bellow this section. Link to published site: https://female-invest.webflow.io/
Read-only link: Webflow - Female Invest

Screenshot 2023-02-01 at 10.59.54
Screenshot 2023-02-01 at 10.59.542628×472 48.6 KB

2

I think that might be happening due to piece of code you have added in the body page settings.

Perhaps it seems like you are clicking the tab when getting to it?

<script defer="">
(function () {

  var init, QuestionBlock, handleTabTriggerClick;
  var tabTriggers = document.querySelectorAll(".tab-trigger");
  var questionsWrappers = Array.from(document.querySelectorAll(".dropdowns-wrapper"));
  var QuestionBlocks = [];

  QuestionBlock = function (wrapper) {
    this.wrapper = wrapper;
    this.activeTrigger = wrapper.querySelector(".accordion-faq--active") || false;
    this.storeQuestions();
    this.listenForClick();
    if(!this.activeTrigger) return;
    this.adjustContainer();
  };

  QuestionBlock.prototype.adjustContainer = function () {
    this.questions.forEach(function (question) {
      var height = "0px";
      if (question.trigger === this.activeTrigger) {
        height = question.content.offsetHeight + "px";
      }
      question.container.style.height = height;
    }, this);
  };

  QuestionBlock.prototype.handleQuestionClick = function (e) {
    var clickedQuestion = e.currentTarget;
    if (this.activeTrigger === clickedQuestion) {
      this.activeTrigger = false;
    } else {
      this.activeTrigger = clickedQuestion;
    }

    this.adjustContainer();
  };

  QuestionBlock.prototype.storeQuestions = function () {
    this.questions = [];
    var questions = this.wrapper.querySelectorAll(".accordion-faq");
    var answers = this.wrapper.querySelectorAll(".accordion-answer-wrap");
    questions.forEach(function (trigger, i) {
      this.questions.push({
        trigger: trigger,
        container: answers[i],
        content: answers[i].querySelector(".text-answer"),
      });
    }, this);
  };

  QuestionBlock.prototype.listenForClick = function () {
    this.questions.forEach(function (question) {
      question.trigger.addEventListener("click", this.handleQuestionClick.bind(this));
    }, this);
  };
  
  handleTabTriggerClick = function(){
    setTimeout(function(){
        QuestionBlocks.forEach(function(_QuestionBlock){
            _QuestionBlock.adjustContainer();
        });
    }, 400);
  }

  init = function () {
    QuestionBlocks = questionsWrappers.map(function (questionWrapper) {
      return new QuestionBlock(questionWrapper);
    });
    
    tabTriggers.forEach(function(trigger){
    	trigger.addEventListener("click", handleTabTriggerClick);
    })
  };

  init();
})();

</script>

Can you elaborate what you are trying to achieve with this script? That might help pinpoint the solution

3

Hey, the script was written for the accordion to be closed on click, and for the first active tab to be initially open on both tabs :smile: The thing is I have the exact same section on the Membership page and it doesnt behave like that over there.