https://mizuki-eye.com/js/infoeditor.js

1// アコーディオン（メディコエディタ）アニメーション対応 ----------------------------------------
2$(function(){
3	var OPEN_COUNT = 3;
4
5	function watchDOM(selector, callback) {
6		$(selector).each(function() {
7			if ($(this).data('observer')) {
8				return;
9			}
10			const observer = new MutationObserver(callback);
11			observer.observe(this, {
12				childList: true,
13				subtree: true
14			});
15			$(this).data('observer', observer);
16		});
17	}
18
19	function openItem($item, animate) {
20		const $content = $item.children('.accordion-content');
21		$item.prop('open', true).addClass('open');
22		if (!animate) {
23			$content.css('height', 'auto');
24			return;
25		}
26		const target = $content[0].scrollHeight;
27		$content.css('height', '0px');
28		$content[0].offsetHeight;
29		$content.css('height', target + 'px');
30		$content.off('transitionend.accordion');
31		$content.one('transitionend.accordion', function(e) {
32			if (e.originalEvent.propertyName === 'height') {
33				$content.css('height', 'auto');
34			}
35		});
36	}
37
38	function closeItem($item) {
39		const $content = $item.children('.accordion-content');
40		$content.css('height', $content[0].scrollHeight + 'px');
41		$content[0].offsetHeight;
42		$content.css('height', '0px');
43		$item.removeClass('open');
44		$content.off('transitionend.accordion');
45		$content.one('transitionend.accordion', function(e) {
46			if (e.originalEvent.propertyName === 'height') {
47				$item.prop('open', false);
48			}
49		});
50	}
51
52	function initAccordion() {
53		$('.medico-info-list').each(function() {
54			const $wrap = $(this);
55			$wrap.find('.accordion-container').children('.accordion-item').each(function(index) {
56				const $item = $(this);
57				if (!$item.data('accInit')) {
58					$item.data('accInit', true);
59					$item.children('.accordion-header').on('click', function(e) {
60						e.preventDefault();
61						if ($item.hasClass('open')) {
62							closeItem($item);
63						} else {
64							openItem($item, true);
65						}
66					});
67					if (index < OPEN_COUNT) {
68						openItem($item, false);
69					} else {
70						$item.prop('open', false).removeClass('open');
71						$item.children('.accordion-content').css('height', '0px');
72					}
73				}
74			});
75		});
76	}
77
78	initAccordion();
79	watchDOM('.medico-info-list', initAccordion);
80});