• widgetマスター

    モデレータ
    2023年8月22日 19:07

    まずはCSSに下記コードを追加してください!

    .is-hide {
      display: none !important;
    }

    HTMLはclass名を変更します!

    【変更前】

    <div class="revealarea js-reveal is-hidden">
        完了ボタンを押すと表示される部分。...以下省略
    </div>

    【変更後】

    <div class="questionArea js-form-radio is-hide">
        完了ボタンを押すと表示される部分。...以下省略
    </div>

    JavaScript headはコードを適切な位置に追加してください!

    【変更前】

    radioList.forEach((radio) => {
      radioName.push(radio.name);
      radio.addEventListener('change', (e) => {
        let self = e.target;
        let list = el.querySelectorAll(radioSet);
        let current = self.closest(radioSet);
        let currentNo = Array.prototype.indexOf.call(list, current);
        let finishBtn = el.querySelector('.js-switch-btn');
        let next;
    
        if (list.length > currentNo + 1) {
          next = list[currentNo + 1];
        } else {
          next = finishBtn;
        }
    
        let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset + next.clientHeight / 2 - window.innerHeight / 2;
    
        _.scrollTo(scrollPoint, option.duration);
    
        let btnFlg = true;
        let form = el.querySelector('form[name="form-scroll-enquete"]');
    
        radioName.forEach((name) => {
          let radioGroup = form[name];
          if (!radioGroup.value) {
            btnFlg = false;
          }
        });
      });
    });

    【変更後】

    radioList.forEach((radio) => {
      radioName.push(radio.name);
      radio.addEventListener('change', (e) => {
        let self = e.target;
        let list = el.querySelectorAll(radioSet);
        let current = self.closest(radioSet);
        let currentNo = Array.prototype.indexOf.call(list, current);
        let finishBtn = el.querySelector('.js-switch-btn');
        let next;
    
        if (list.length > currentNo + 1) {
          next = list[currentNo + 1];
        } else {
          next = finishBtn;
        }
    
        //追加ここから
        if (next.classList.contains('is-hide')) {
          next.classList.remove('is-hide');
        }
        //追加ここまで
    
        let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset + next.clientHeight / 2 - window.innerHeight / 2;
    
        _.scrollTo(scrollPoint, option.duration);
    
        let btnFlg = true;
        let form = el.querySelector('form[name="form-scroll-enquete"]');
    
        radioName.forEach((name) => {
          let radioGroup = form[name];
          if (!radioGroup.value) {
            btnFlg = false;
          }
        });
      });
    });

    上記を行ってもらえば、「ボタン」を削除してもQ4の選択肢を押すことで隠れている部分が表示できます!

    操作イメージ:https://t.gyazo.com/teams/squadbeyond/d5533d96275664d5def4f463e8d60031.mp4