https://paypay.ne.jp/ot/wp-content/themes/paypay/assets/article/js/article_01.js?v=2

1;(function($){
2  // accordion
3  $.extend({
4    toggleAccordion : function(){
5      var $acorBox = $(".js-AcorBox");
6      var $acorBtn = $(".js-AcorBtn");
7      $acorBox.not(".is-show").find(".js-AcorDetail").css("display","none");
8      $acorBtn.click(function(e){
9        var $this = $(this);
10        var acorBox = $acorBox.has($this);
11        var acorDetail = acorBox.find(".js-AcorDetail");
12        if(!(acorDetail.is(":animated"))){
13          if(!(acorBox.hasClass("is-show"))){
14            acorBox.removeClass("is-hide").addClass("is-show");
15            acorDetail.slideDown(500,function(){
16            });
17          } else {
18            acorDetail.slideUp(500,function(){
19              acorBox.removeClass("is-show").addClass("is-hide");
20            });
21          }
22        }
23      });
24    }
25  });
26
27  // flowPosition (jQueryプラグイン)
28  // フローの現在地を表示する
29  $.fn['flowPosition'] = function() {
30    // 設定（フロー共通）
31    var flowButtonCurrentClass = 'position__item--current'; // 現在のフロークラス名
32    var tpl = { // テンプレート
33      flow: '<ol class="flow__position position">',
34      flowButton: '<li class="position__item"><span class="position__dot">'
35    };
36
37    /**
38     * DOM要素を設定する
39     * @param {Object} $el 設定されたDOM要素
40     */
41    var setElements = function ($el) {
42        $el.$sliderList = $el.$slider.find('.flow__list'); // フロースライダーエリア要素
43        $el.$sliderItems = $el.$slider.find('.flow__item'); // フローアイテム要素
44    };
45
46    /**
47     * 各情報を設定する
48     * @param {Object} $el 設定されたDOM要素
49     * @param {Object} settings 設定された情報
50     */
51    var setFlowWidth = function ($el, settings) {
52      settings.sliderWidth = Math.ceil($el.$slider.outerWidth()); // フロースライダーの内包幅
53      settings.threshold = settings.sliderWidth / 2; // 現在のフローを特定する閾値
54    };
55
56    /**
57     * フローアイテムの位置情報を設定する
58     * @param {Object} $el 設定されたDOM要素
59     * @param {Object} settings 設定された情報
60     */
61    var setCurrentPositionMapping = function ($el, settings) {
62      var slideItemsMapping = settings.slideItemsMapping = [];
63      var sliderItemsPos = 0;
64
65      $el.$sliderItems.each(function(i, v) {
66        sliderItemsPos += Math.floor($(this).outerWidth(true));
67        slideItemsMapping.push(sliderItemsPos);
68      });
69    };
70
71    /**
72     * 現在位置要素を表示する
73     * @param {Object} $el 設定されたDOM要素
74     * @param {Object} tpl 現在位置要素のテンプレート
75     */
76    var addCurrentPositionElement = function ($el, tpl) {
77      var flowButtons = '';
78      for (var i = 0, l = $el.$sliderItems.length; i < l; i++) flowButtons += tpl.flowButton;
79      $(tpl.flow).append(flowButtons).appendTo($el.$slider);
80      $el.$flowButtons = $el.$slider.find('.position__item');
81    };
82
83    /**
84     * 現在位置表示を更新する
85     * @param {jQueryObject} $target
86     */
87    var updateCurrentPositionDisplay = function ($target) {
88      $target.siblings().removeClass(flowButtonCurrentClass);
89      $target.addClass(flowButtonCurrentClass)
90    };
91
92    /**
93     * 横スクロール監視
94     * @param {Object} $el 設定されたDOM要素
95     * @param {Object} settings 設定された情報
96     */
97    var attachScrollEvent = function ($el, settings) {
98      $el.$sliderList.on('scroll', function(e) {
99        var threshold = settings.threshold;
100        var slideItemsMapping = settings.slideItemsMapping;
101        var sliderWidth = settings.sliderWidth;
102        var scrollPos = Math.ceil($(this).scrollLeft());
103        var index;
104
105          // 現在のフロー判定
106        for (var i = 0, l = slideItemsMapping.length; i < l; i++) {
107          // 先頭
108          if (0 === scrollPos) {
109            index = 0;
110            break;
111          // 末尾
112          } else if (slideItemsMapping[slideItemsMapping.length - 1] <= scrollPos + sliderWidth) {
113            index = slideItemsMapping.length - 1;
114            break;
115          // それ以外
116          } else if (slideItemsMapping[i] > scrollPos + threshold) {
117            index = i;
118            break;
119          }
120        }
121        // 現在位置表示を更新する
122        updateCurrentPositionDisplay($el.$flowButtons.eq(index));
123      }).trigger('scroll');
124    };
125
126    /**
127     * フロー要素幅監視
128     * @param {Object} $el 設定されたDOM要素
129     * @param {Object} settings 設定情報
130     */
131    var attachResizeEvent = function ($el, settings) {
132      $(window).on('resize', function(e) {
133        // フロー要素幅を設定する
134        setFlowWidth($el, settings);
135        // フローアイテムの位置情報を設定する
136        setCurrentPositionMapping($el, settings);
137        // 現在の位置を更新
138        $el.$sliderList.trigger('scroll');
139      });
140    }
141
142    /**
143     * 実行処理
144     */
145    return $(this).each(function(i, v) {
146      // 設定（フロー個別）
147      var settings = {
148        slideItemsMapping: [], // 各フローの開始位置
149        sliderWidth: 0, // フロースライダーの内包する幅

150        threshold: 0 // 閾値（現在のフローを特定するためのフロースライダー表示幅の左からの距離）
151      };
152
153      var $el = {
154        $slider: $(this).find('.flow__detail'), // プラグイン起点要素
155        $sliderList: null, // フロースライダーエリア要素
156        $sliderItems: null, // フローアイテム要素
157        $flowButtons: null // フローの現在地表示要素
158      };
159
160      // DOM要素を設定する
161      setElements($el);
162
163      // フロー要素幅を設定する
164      setFlowWidth($el, settings);
165
166      // フローアイテムの位置情報を設定する
167      setCurrentPositionMapping($el, settings);
168
169      // 現在位置要素を表示する
170      addCurrentPositionElement($el, tpl);
171
172      // 横スクロール監視
173      attachScrollEvent($el, settings);
174
175      // フロー要素幅監視
176      attachResizeEvent($el, settings);
177    });
178  };
179
180  $(function() {
181    // accordion
182    $.toggleAccordion();
183
184    // 起動
185    // .flowに、.flow--excludePositionを付与することで適用から除外する
186    if ($('.flow').length) $('.flow:not(.flow--excludePosition)').flowPosition();
187
188    // スクロールヒント
189    $(window).on('load resize', function(){
190      if (window.matchMedia('(max-width: 750px)').matches) {
191        new ScrollHint('.js-scrollHint', {
192          i18n: {
193            scrollable: 'スクロールできます'
194          }
195        });
196      }
197    });
198  });
199
200  /**
201 * 参考になりましたかボタン
202 */
203  $('.js-helpful').on('click', function(e){
204    e.preventDefault();
205    $('.js-helpfulThanks').show();
206  })
207})(jQuery);