WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › アンケートwidgetのコンテンツ表示について › 返信先:アンケートwidgetのコンテンツ表示について
-
まずは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