https://lietoclinic.com/wp-content/themes/lieto-clinic-hp/dist/js/main.js?ver=1.0.0

1$('.js-accordion').on('click', function(){ 
2  $(this).toggleClass('is-active');
3  $(this).next().slideToggle();
4});
5
6$('#p-fvSlider__slick').slick({
7  infinite: true,          // スライドをループさせるか
8  slidesToShow: 1,   // スライドを画面に何枚見せるか
9  slidesToScroll: 1,   // 1回のスクロールで何枚見せるか
10  autoplay: true,      // 自動的に動き出すか。初期値false。
11  autoplaySpeed: 3000, // 次のスライドに切り替わる待ち時間
12  speed: 1000,          // 切り替え時のスピード(1000=1秒)
13  arrows: true,         // 左右の移動ボタン
14  dots: true, // ドット（ページ送り）を表示する(デフォルトfalse)
15  adaptiveHeight: true,
16  prevArrow: '<button class="slide-arrow prev-arrow" aria-label="arrow" aria-label="arrow"></button>',
17  nextArrow: '<button class="slide-arrow next-arrow" aria-label="arrow" aria-label="arrow"></button>',
18
19  responsive: [
20    {
21    breakpoint: 768,
22      settings: {
23        arrows: false,
24        slidesToShow: 1,
25        slidesToScroll: 1,
26      }
27    }
28  ]
29});
30
31$('#p-topSlider__slick').slick({
32  infinite: true,          // スライドをループさせるか
33  slidesToShow: 3,   // スライドを画面に何枚見せるか
34  slidesToScroll: 1,   // 1回のスクロールで何枚見せるか
35  autoplay: true,      // 自動的に動き出すか。初期値false。
36  autoplaySpeed: 5000, // 次のスライドに切り替わる待ち時間
37  speed: 1000,          // 切り替え時のスピード(1000=1秒)
38  arrows: true,         // 左右の移動ボタン
39  dots: false, // ドット（ページ送り）を表示する(デフォルトfalse)
40  adaptiveHeight: true,
41  prevArrow: '<button class="slide-arrow prev-arrow" aria-label="arrow" aria-label="arrow"></button>',
42  nextArrow: '<button class="slide-arrow next-arrow" aria-label="arrow" aria-label="arrow"></button>',
43
44  responsive: [
45    {
46    breakpoint: 768,
47      settings: {
48        arrows: false,
49        centerMode: true,  // trueで、両端見切れ状態を作る
50        centerPadding: "22.5%", // 左右の見切れで表示される幅
51        slidesToShow: 1,
52        slidesToScroll: 1,
53      }
54    }
55  ]
56});
57
58// クリニック一覧の複数スライダー
59$('.p-access__mainSlider').each(function(index) {
60  index++;
61  var mainClassName = '.js-clinic-mainslick_0'+index;
62  var subClassName = '.js-clinic-subslick_0'+index;
63
64  $(mainClassName).slick({
65    slidesToShow: 1,
66    slidesToScroll: 1,
67    fade: true,
68    infinite: true,
69    autoplay: true,
70    autoplaySpeed: 5000,
71    speed: 600,
72    adaptiveHeight: true,
73    
74    dots: false,
75    arrows: true,
76    prevArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-prev-arrow">',
77    nextArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-next-arrow">',
78
79    asNavFor: subClassName,
80
81    pauseOnFocus: false,
82    pauseOnHover: false,
83    pauseOnDotsHover: false,
84
85    responsive: [{
86      breakpoint: 767, // 767以下でのデザイン
87      settings: {
88        centerMode: true,
89        centerPadding: "11.8%",
90        dots: true,
91        fade: false,
92        asNavFor: '',
93      }
94    }]
95  });
96
97  $(subClassName).slick({
98    slidesToShow: 4,
99    focusOnSelect: true,
100    asNavFor: mainClassName,
101  });
102});
103
104// クリニック詳細の単一slider
105$('.p-singleClinicAlbum__list').slick({
106  slidesToShow: 3,
107  slidesToScroll: 1,
108  fade: false,
109  infinite: true,
110  autoplay: true,
111  autoplaySpeed: 5000,
112  speed: 600,
113  adaptiveHeight: true,
114  
115  dots: true,
116  arrows: true,
117  prevArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-prev-arrow" aria-label="arrow">',
118  nextArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-next-arrow" aria-label="arrow">',
119
120  pauseOnFocus: false,
121  pauseOnHover: false,
122  pauseOnDotsHover: false,
123
124  responsive: [{
125    breakpoint: 767, // 767以下でのデザイン
126    settings: {
127      slidesToShow: 1,
128      slidesToScroll: 1,
129      centerMode: true,
130      centerPadding: "10%",
131    }
132  }]
133});
134
135// 性別の全ボタンを取得
136const buttons = document.querySelectorAll('.p-pageVoice__searchBtn');
137
138// 性別のボタンにクリックイベントを追加(radio)
139buttons.forEach(button => {
140  button.addEventListener('click', () => {
141    buttons.forEach(btn => btn.classList.remove('selected'));
142    button.classList.add('selected');
143  });
144});
145
146//年齢の全ボタンを取得
147const checkboxLabels = document.querySelectorAll('.checkbox__label');
148//年齢のボタンにクリックイベントを追加(checkbox)

149checkboxLabels.forEach(ages => {
150  ages.addEventListener('click', () => {
151    ages.classList.toggle('selected');
152  });
153});
154
155// 検索ボタンが押された時の遷移先URL
156const ageCheckboxes = document.querySelectorAll('.ageCheckbox');
157const buildUrl = () => { // URLを変更する
158  let url = '/voice/'; // 通常は/voice/に遷移
159  const categoryButtons = document.querySelectorAll('.p-pageVoice__searchBtn');
160  categoryButtons.forEach((button) => {
161    if (button.classList.contains('selected')) { // 年齢にselectedがあれば、タクソノミー遷移
162      url = '/voice/' + button.getAttribute('data-slug') + '/';
163    }
164  });
165
166  let i = 0;
167  let isFirst = true;
168  ageCheckboxes.forEach((checkbox) => {
169    if (checkbox.checked) {
170      url += `${isFirst ? '?' : '&'}age%5B%5D=${checkbox.value}`;
171      isFirst = false;
172    }
173  });
174  return url;
175}
176
177// 検索ボタンが押されたとき
178const filterForm = document.getElementById('voice-filter');
179if (filterForm) {
180  filterForm.onsubmit = function(e) {
181    e.preventDefault();
182    window.location.href = buildUrl();
183  };
184}
185
186$('.p-faq__question').on('click', function(){ 
187  $(this).children('.p-faq__questionOpen').toggleClass('is-active');
188  $(this).next('.p-faq__answer').slideToggle();
189});
190
191$('p-form__inputRadio input').change(function() {
192  $(this).addClass('is-active');
193  let $btn = $(this);
194  if ($btn.prop('checked')) {
195    $(this).parents('label').addClass('is-active');
196  } else {
197    $(this).parents('label').removeClass('is-active');
198      // $('#target').text('チェックが外れました。')
199  }
200});
201
202$('#fv-slick').slick({
203  slidesToShow: 1,
204  slidesToScroll: 1,
205  fade: true,
206  infinite: true,
207  autoplay: true,
208  autoplaySpeed: 3000,
209  speed: 1000,
210  dots: false,
211  arrows: true,
212});
213
214$('#js-hamburger').on('click', function(){ 
215  $('.c-hamburger__lines').toggleClass('is-active');
216  $('.l-spHeader__nav').fadeToggle(300);
217  $(".c-hamburger__text._menu").toggleClass("is-active");
218  $(".c-hamburger__text._close").toggleClass("is-active");
219  $("body").toggleClass("is-active");
220});
221
222//関数定義
223const myFunc = function(src){
224
225  //Promiseオブジェクトを生成して返す
226  return new Promise(function(resolve, reject){
227      //Imageオブジェクトを生成
228      const image = new Image();
229
230      //読み込む画像を設定（関数の引数で取得した画像パスを代入）
231      image.src = src;
232
233      //onloadで画像読み込み完了後に処理
234      image.onload = function(){
235          //成功時にthenの処理へ
236          resolve(image);
237      }
238
239      //onerrorで画像読み込みエラー時に処理
240      image.onerror = function(error){
241          //失敗時にcatchの処理へ
242          reject(error);
243      }
244  });
245}
246
247//ページ内のimg要素を取得
248const imgs = document.getElementsByTagName('img');
249
250//img要素の数だけ繰り返し処理
251for (const img of imgs) {
252
253  //img要素のsrc属性の値を取得
254  const src = img.getAttribute('src');
255
256  //関数実行
257  myFunc(src)
258
259  //読み込みが完了した（画像が設定された）Imageオブジェクトを受け取って処理
260  .then(function(res){
261
262      //img要素のwidth属性に値を設定
263      img.setAttribute('width', res.width / 2);
264
265      //img要素のheight属性に値を設定
266      img.setAttribute('height', res.height / 2);
267  })
268
269  //画像読み込みエラー時の処理
270  .catch(function(error){
271      console.log(error);
272  });
273}
274
275// mapからW/H属性を削除
276$('.p-access__map > iframe').removeAttr('width height');
277
278// 郵便番号自動入力
279$(document).ready(function() {
280  $('#your-code').on('keyup', function() {
281    AjaxZip3.zip2addr(this, '', 'addr11', 'addr11');
282  });
283});
284
285// modalの実装
286$(function() {
287  // ボタンをクリックしたときにモーダルを表示する
288  $(".js-modal-open").click(function() {
289    $(".p-modal").fadeIn();
290  });
291
292  // オーバーレイまたは閉じるボタンをクリックしたときにモーダルを非表示にする
293  $(".js-modal-close").click(function() {
294    $(".p-modal").fadeOut();
295  });
296});
297
298
299
300
301var monitorSplide = document.getElementById('monitorSplide');
302if(monitorSplide) {
303  const splide = new Splide("#monitorSplide", {
304    autoplay: true, // 自動再生
305    type: "loop", // ループ
306    rewind: true,
307    pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
308    pauseOnFocus: false, // 矢印をクリックしてもスクロールを停止させない
309    pagination: false, // ページネーション非表示
310    interval: 5000, // 自動再生の間隔
311    speed: 1000, // スライダーの移動時間
312    gap: 16,
313  }).mount();
314
315  // 次のスライドが表示されるタイミングで発生
316  splide.on("active", function () {
317    slideIndex();
318  });
319  function slideIndex() {
320    // 現在のスライドが何枚目かを取得
321    document.getElementById("slide-current").textContent = splide.index + 1;
322    // スライドの総数を取得
323    document.getElementById("slide-length").textContent = splide.length;
324  }
325  slideIndex();
326}
327
328// 郵便番号自動入力
329$(document).ready(function() {
330  $('#your-code').on('keyup', function() {
331    AjaxZip3.zip2addr(this, '', 'addr11', 'addr11');
332  });
333});
334
335$('a[href^="#"]').on('click', function(){
336  let speed = 500;
337  let href= $(this).attr("href");
338  let target = $(href == "#" || href == "" ? 'html' : href);
339  let position = target.offset().top;
340  $("html, body").animate({scrollTop:position}, speed, "swing");
341  return false;

342});
343
344$('.l-header__bottomItem.has-child').hover(
345  function() {
346    $(this).children('.l-header__subnav').toggleClass('_active');
347  },
348);
349
350// アクセス方法の表示をtagboxで切り替える
351// 最初の要素を表示
352$(".p-singleClinichow__table:first").addClass("is-active");
353$(".p-singleClinichow__tab:first").addClass("is-active");
354
355$('.p-singleClinichow__tab').on('click', function() {
356  const index = $(this).index();
357
358  $('.p-singleClinichow__tab').removeClass('is-active');
359  $(this).addClass('is-active');
360
361  $('.p-singleClinichow__table').removeClass('is-active');
362  $('.p-singleClinichow__table').eq(index).addClass('is-active');
363});
364
365$('.lwptoc_toggle > a').on('click', function(){ 
366  $(this).toggleClass('is-active');
367  // $(this).next().slideToggle();
368});
369
370// 目次の表示・閉じるをクリックした時リンク削除
371const tocLink = document.querySelector('.lwptoc_toggle_label');
372// href属性を変更
373if (tocLink) {
374  tocLink.href = 'javascript:void(0)'; // リンク無効化
375}
376
377$(function(){
378}); 
379
380console.log(123);
381
382// 症状をクリックした時の処理
383$('.p-topTreatment__tab').on('click', function() {
384  const index = $(this).index();
385
386  $('.p-topTreatment__tab').removeClass('_active');
387  $(this).addClass('_active');
388
389  $('.p-topTreatment__table').removeClass('_active');
390  $('.p-topTreatment__table').eq(index).addClass('_active');
391});
392
393// image-compare-viewer
394document.addEventListener("DOMContentLoaded", function () {
395  const viewers = document.querySelectorAll('.image-compare-viewer');
396  viewers.forEach((element) => {
397    new ImageCompare(element, {
398      controlColor: "#fff",
399      addCircle: true,
400      showLabels: true,
401      startingPoint: 5, // ← ここを変更！左寄りに
402      labelOptions: {
403        before: element.dataset.labelBefore || 'Before',
404        after: element.dataset.labelAfter || 'After'
405      }
406    }).mount();
407  });
408});
409
410// js-scrollable
411window.addEventListener('DOMContentLoaded', function () {
412  new ScrollHint('.js-scrollable', {
413    scrollHintIconAppendClass: 'scroll-hint-icon-white', 
414    suggestiveShadow: true,
415    i18n: {
416      scrollable: "スクロールできます"
417    }
418  });
419});
420
421
422$(function () {
423    $(".media-slick").slick({
424      autoplay: true, 
425      arrows: true,
426      prevArrow: '<button class="arrow_name prev_arrow"></button>',
427      nextArrow: '<button class="arrow_name next_arrow"></button>',
428      variableWidth: true, // 固定幅と併用したい場合は true
429      centerMode: true,    // ← これで中央揃え
430      centerPadding: "0px" // ← 両サイドの余白を調整（例: "50px" も可）
431    });
432});
433
434jQuery(function ($) {
435
436  // ==========================
437  // PC：タブ挙動
438  // ==========================
439  $('.js-tab-slider').each(function () {
440    var $block   = $(this);
441    var $tabs    = $block.find('.js-tab-slider-tab');
442    var $panels  = $block.find('.js-tab-slider-panel');
443
444    $tabs.on('click', function (e) {
445      e.preventDefault();
446      var index = $(this).data('index');
447
448      $tabs.removeClass('is-active');
449      $(this).addClass('is-active');
450
451      $panels.removeClass('is-active');
452      $panels.filter('[data-index="' + index + '"]').addClass('is-active');
453    });
454  });
455
456  // ==========================
457  // SP：slick スライダー
458  // 768px 未満でのみ有効
459  // ==========================
460  function initTabSliderSlick() {
461    $('.js-tab-slider-slider').each(function () {
462      var $slider = $(this);
463
464      // slick 済なら何もしない
465      if ($slider.hasClass('slick-initialized')) {
466        return;
467      }
468
469      $slider.slick({
470        mobileFirst: true,
471        slidesToShow: 1,
472        dots: true,
473        arrows: false,
474        infinite: false,
475        adaptiveHeight: true,
476        // 768px 以上になったら unslick（=PCではタダの並び）
477        responsive: [
478          {
479            breakpoint: 768,
480            settings: 'unslick'
481          }
482        ]
483      });
484    });
485  }
486
487  // 初期化
488  initTabSliderSlick();
489
490  // 画面幅変更時に「SP → PC」など切り替わる場合に備えて
491  $(window).on('resize orientationchange', function () {
492    initTabSliderSlick();
493  });
494
495});
496jQuery(function ($) {
497
498  // ==========================
499  // PC：タブ切り替え
500  // ==========================
501  $('.js-tab-slider').each(function () {
502    var $block  = $(this);
503    var $tabs   = $block.find('.js-tab-slider-tab');
504    var $panels = $block.find('.js-tab-slider-panel');
505
506    $tabs.on('click', function (e) {
507      e.preventDefault();
508
509      var index = $(this).data('index');
510
511      $tabs.removeClass('is-active');
512      $(this).addClass('is-active');
513
514      $panels.removeClass('is-active');
515      $panels.filter('[data-index="' + index + '"]').addClass('is-active');
516    });
517  });
518
519
520  // ==========================
521  // SP 用スライダー

522  // （PC でも初期化されるけど CSS で非表示なので問題なし）
523  // ==========================
524  $('.js-tab-slider-slider').each(function () {
525    var $slider = $(this);
526
527    // 既に slick 済みならスキップ
528    if ($slider.hasClass('slick-initialized')) {
529      return;
530    }
531
532    $slider.slick({
533      slidesToShow: 1,
534      dots: true,
535      arrows: true,
536      prevArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-prev-arrow">',
537      nextArrow: '<button sizes=auto class="slick-slide-arrow _archive slick-next-arrow">',
538      infinite: true,
539      adaptiveHeight: true
540    });
541  });
542
543});