How to hide right chevron in carousel until an option is selected?

Question

Hi all, I want to hide right chevron in carousel until an option is selected, and I want this to happen at each carousel card. I was able to write a JavaScript code but it only seems to be working for first carousel card. Can anyone help me here? Please! I tried using ChatGPT, but the code it generates isn’t working. Here is the code:Qualtrics.SurveyEngine.addOnload(function () {  var q = jQuery(this.questionContainer);  // Hide the right chevron once at the start  var rightChevron = q.find(".CarouselCardRightContainer .CarouselChevronContainer");  rightChevron.hide();  // Add click listener to each CarouselAnswerButtonContainer  q.find(".CarouselAnswerButtonContainer").each(function () {    jQuery(this).on("click", function () {      rightChevron.show();    });  });});

vgayraud · Accepted Answer

Hi,I used this to obtain something similar in the past. I wasn’t hiding the chevron completely, just enabling/disabling it using existing classes. Feel free to adapt to your needs.Qualtrics.SurveyEngine.addOnReady(function () {    var carouselContainer = document.querySelector('#' + this.questionId + ' .CarouselCardContainer');    var rightChevronButton = document.querySelector('#' + this.questionId + ' .CarouselCardRightContainer .CarouselChevronContainer');    var inputs = document.querySelectorAll(        'input[type="radio"][name="QR~' + this.questionId + '~ANSWER"], input[type="checkbox"][name="QR~' + this.questionId + '~ANSWER"]'    );    var allCards = carouselContainer.querySelectorAll('.CarouselCard');    function disableRightChevron() {        rightChevronButton.setAttribute('disabled', 'true');        var chevronIcon = rightChevronButton.querySelector('.CarouselChevron');        if (chevronIcon) {            chevronIcon.classList.add('Disabled');        }    }    function enableRightChevron() {        rightChevronButton.removeAttribute('disabled');        var chevronIcon = rightChevronButton.querySelector('.CarouselChevron');        if (chevronIcon) {            chevronIcon.classList.remove('Disabled');        }    }    function isAnyScalePointSelected() {        for (var i = 0; i < inputs.length; i++) {            if (inputs[i].checked) {                return true;            }        }        return false;    }    function isLastCardVisible() {        var lastCard = allCards[allCards.length - 1];        return !lastCard.classList.contains('NoDisplay');    }    function updateChevronState() {        if (isLastCardVisible()) {            disableRightChevron();        } else if (isAnyScalePointSelected()) {            enableRightChevron();        } else {            disableRightChevron();        }    }    for (var i = 0; i < inputs.length; i++) {        inputs[i].addEventListener('change', function () {            updateChevronState();        });    }    var observer = new MutationObserver(function (mutations) {        for (var i = 0; i < mutations.length; i++) {            if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'class') {                updateChevronState();            }        }    });    for (var i = 0; i < allCards.length; i++) {        observer.observe(allCards[i], {            attributes: true        });    }    updateChevronState();});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded