【jQuery】アコーディオン部分が開ききらない動作

Question

前提・実現したいこと

シンプルなHTMLコーディングによるサイトを制作しています。
https://liginc.co.jp/web/js/jquery/34048
↑このページを参考にしてアコーディオンを実装したのですが、開閉がうまくいかない（全部開ききらない）ようで、原因を究明しています。

現象としては、
●FireFoxやChromeでは開く動作が途中で止まるのに、IEだと全部開く
●稀に全部開く時もあるが、途中で止まる時が多い
●1つのhtml内に複数のアコーディオンを入れている（構造が同じ）が、全てのアコーディオンが開ききらないわけではない
以上を確認しています。
なお、ブラウザキャッシュはクリアして動作を確認しています。

コードの記述は以下の通りです。

	<div class="dtl-wrap">
		<div class="dtl">
			<p class="dtl-trigger dtl_more"></p>
			<div class="dtl-item">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>

.dtl-wrap {position: relative;}
.dtl-wrap + .dtl-wrap {margin-top: 40px;}

.dtl-trigger {
	cursor:pointer;
	display: block;
	position: absolute;
	width: 10%;
	text-align: center;
	top:0;
	right:0;
	height: 22px;
	border: 1px solid #000;
	padding: 0.5% 2%;
	color:#000;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
.dtl-trigger:hover {background-color: #fff;color:#000;opacity:1;}
.dtl-trigger::after {content: "続きを読む";}

.dtl-item {position: relative;overflow: hidden;}
.dtl-item.is-hide {height: 80px;}
.dtl-item::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 40px;
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.dtl-trigger.is-show {bottom: -2em;background:#000;color:#FFF;}
.dtl-trigger.is-show::after {content: "閉じる";}
.dtl-trigger.is-show + .dtl-item::before {display: none;}

	<script>
		var itemHeights = [];
		var returnHeight;
		$(function(){
			$(".dtl-item").each(function(){
				var thisHeight = $(this).height();
				itemHeights.push(thisHeight);
			$(this).addClass("is-hide");
				returnHeight = $(this).height();
			});
		});
		$(".dtl-trigger").click(function(){
			if(!$(this).hasClass("is-show")) {
				var index = $(this).index(".dtl-trigger");
				var addHeight = itemHeights[index];
			$(this).addClass("is-show").next().animate({height: addHeight},500).removeClass("is-hide");
			} else {
			$(this).removeClass("is-show").next().animate({height: returnHeight},500).addClass("is-hide");
			}
		});
	</script>

考えられる原因に心当たりがある方、解決策をご教示いただけますと幸いです。
宜しくお願い致します。

Comments

[yambejp]

コピペしても異常のところまでたどりつきません
codepenあたりにソースをあげられませんか？

[k-katapashi]

ご回答ありがとうございます。
codepenであげようとしたところ、jsにおいて「index.js: Unexpected token, expected } (10:14)」というエラーが出現し、あげられませんでした。

[退会済みユーザー]

一番最後のアコーディオン要素か鍵だな

[k-katapashi]

ご回答ありがとうございます。
scriptに原因がある可能性がある、ということでしょうか？
たしかに、codepenでもエラーが出現していますので、可能性は高そうですね。
「index.js: Unexpected token, expected } (10:14)」の意味を解読できれば解決の糸口が見つかりそうなのですが…

[yambejp]

「Unexpected token, expected 」で検索するとヒットするのは
React絡みが多いようですが、あくまでもjQueryで間違いないですか？
またライブラリ以外のjsは外部化せずにhtml内に書き込んでみてください

Answer 1

コードにはありませんが、画像を使っていますよね？
画像読み込み前に高さを取得しているためにずれていると思われます。
あらかじめ画像の大きさを指定しておくか、window.onload を使ってみてください。

$(window).on('load', function() {
  ...
});

Comments

[k-katapashi]

ご回答ありがとうございます！
仰る通り、画像を使ったものを想定しています。
高さ指定が難しい状況でしたので、window.onloadを使ってみたところ、正常な動作をするようになりました。

本件、無事に解決いたしました！
ありがとうございましたm(_ _)m