WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › アンケートwidgetのコンテンツ表示について
-
アンケートwidgetのコンテンツ表示について
トピックス by widget初心者 1792 pt 2023年8月22日 16:52 222 PV【widget名】
アンケート(スクロール・ボタンを押すと下部表示・ピンクデザイン)※要javascript
【やりたいこと】
最後の「回答を完了する」ボタンを削除
4問目の設問を応えたら、自動で下部コンテンツを表示させたいイメージ:https://t.gyazo.com/teams/squadbeyond/79b9208337b8a5f1949b25f00d30317f.png
widgetマスター 1 年, 3 月前 2 人 · 1 コメント -
1 コメント
-
まずは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