スライドを切り替えた先のアコーディオンを閉じた状態に

###前提・実現したいこと
・Swiperを使用しスライドを導入
・スライドの中にアコーディオンを入れ、タイトルを押すと中身が表示される
・スライドを切り替えた先のアコーディオンは閉じたまま

###発生している問題
・アコーディオンを開いた状態のままスライドさせると、別のタイトル部分のアコーディオンも開いた状態になっている
例：タイトルAを開く→開いたままスライド→タイトルCも開いた状態になっている

実現したいことの上2つはできているのですが、3つ目がスライドの際の挙動をJSで制御すればいける？のかなと思うのですが、詰まってしまいました。
スライドの数はこの先いくつも増える予定のため、タイトル名ごとに別個のアコーディオン用クラス/記述は作りたくないのですが、それ以外に閉じた状態にさせる方法はあるのでしょうか？


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

<link rel="stylesheet" href="css/sanitize.min.css">
<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/jquery-2.1.4.min.js"></script>
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.min.js"></script>
<script src="ja/js/html5shiv.min.js"></script>
<![endif]-->
</head><body id="wrap">

<div class="wrapper">


<div class="hoge">

	<div class="swiper-container">
		<div class="swiper-wrapper">

			<div class="swiper-slide">
				<div class="slide_hoge">
					<div class="btn">
						<ul class="menu">
							<li>
								<div class="acorditionA" href="#aaaDetail">タイトルA</a></div>
							</li>
							<li>
								<div class="acorditionB" href="#bbbDetail">
									タイトルB
								</div>
							</li>
						</ul>
					</div>

					<div class="acorditionA_in" id="aaa_detail">
						<p>タイトルAの中身</p>
						<p><a href="#wrap">▲上へ戻る</a></p>
					</div>

					<div class="acorditionB_in" id="bbb_detail">
						<p>タイトルBの中身</p>
						<a href="#wrap">▲上へ戻る</a>
					</div>
				</div>
			</div>

			<div class="swiper-slide">
				<div class="slide_hoge">
					<div class="btn">
						<ul class="menu">
							<li>
								<div class="acorditionA" href="#aaaDetail">タイトルC</a></div>
							</li>
							<li>
								<div class="acorditionB" href="#bbbDetail">
									タイトルD
								</div>
							</li>
						</ul>
					</div>
					<div class="acorditionA_in" id="aaa_detail">
						<p>タイトルCの中身</p>
						<p><a href="#wrap">▲上へ戻る</a></p>
					</div>

					<div class="acorditionB_in" id="bbb_detail">
						<p>タイトルDの中身</p>
						<a href="#wrap">▲上へ戻る</a>
					</div>
				</div>
			</div>

		</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>
</div><!--// wrapper //-->

<script src="js/swiper.min.js"></script>

</body>
</html>

$(function(){
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		slidesPerView: 1,
		paginationClickable: true,
		spaceBetween: 30,
		loop: true,
	});
	$('.acorditionA').click(function(){
		$('.acorditionA_in').slideToggle();
	});
	$('.acorditionB').click(function(){
		$('.acorditionB_in').slideToggle();
	});
});

.hoge{
	position: relative;
	min-height: 100%;
	max-width: 1024px;
	padding: 2rem 4rem 0;
	margin: 0 auto;
}
.slide_hoge{
	width: 100%;
	position: relative;
}
.acorditionB, .acorditionA{
	cursor: pointer;
}
.acorditionB_in, .acorditionA_in{
	width: 100%;
	height: 800px;
	color: #fff;
	display: none;
}
.acorditionA_in{
	background-color: #666;
}
.acorditionB_in{
	background-color: #999;
}
.btn{ width: 100%;text-align: center; }
.btn ul{ letter-spacing: -.4em;margin: .5rem 0; }
.btn li{
	width: 50%;
	display: inline-block;
	letter-spacing: normal;
	padding: .5rem;
	border: 1px solid #ccc;
	background-color: #eee;
}
.btn li a{ display: block;text-decoration: none; }
.btn li a:hover{ opacity: .5; }

.swiper-pagination{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}
.swiper-slide{ background: none; }

【追記】
・スライド内のアコーディオンが開いた状態で別のスライドに移動すると、ページの高さがスライドが開いた状態のものになっている
例：「タイトルA」のスライドを開く→スライド→スライド内のアコーディオンが開いていなくても、「タイトルA」が開いているのでページがその高さになっている
これを、スライドごとの高さに変えたい場合はどうすれば良いのでしょうか…？

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$('.acorditionA').click(function(){
2	$('.acorditionA_in').slideToggle();
3});
4$('.acorditionB').click(function(){
5	$('.acorditionB_in').slideToggle();
6});

問題はこの部分ですね。この書き方だと、同じ.acorditionA_inである全てのタグを開閉することになります。
同一スライド内の.acorditionA_inを開閉したいのでしたら、限定して探していく、このようなコードにすればいいことになります。

javascript
1$('.acorditionA').click(function(){
2	$(this).parents(".swiper-slide").find('.acorditionA_in').slideToggle();
3});
4$('.acorditionB').click(function(){
5	$(this).parents(".swiper-slide").find('.acorditionB_in').slideToggle();
6});

投稿2017/07/14 04:10

zohnam

総合スコア1441

a2s

2017/07/14 05:17

ありがとうございます！こちらの方法でアコーディオン部分できました！質問の方に追記をしたのですが、スライドごとに（ページの）高さを設定させる方法がもしわかりましたらお教えいただいても良いでしょうか…？

zohnam

2017/07/14 05:59

Swiperはスライドの直角方向の長さは揃っている前提のライブラリのはずですので、その条件を満たすためには、結構な努力が必要です。アイデアとしては、4つあります。・高さ最大を前提に、見た目を調整する・アコーディオンの展開方向を横方向にする（横方向可変はSwiperの設定でなんとかなるはずです）・アコーディオンの展開を別途保存しておいて、onSlideChangeStartのタイミングでいったん全部アコーディオンを閉じ、onSlideChangeEndのタイミングでactiveIndexのスライドだけを開閉処理する（非表示スライドは全て閉じているので、高さはactiveIndexのスライドに依存した最小限になるはず）・各スライドを、縦方向のswiperオブジェクトにする(各スライドごとに、direction:'vertical'設定されたnew Swiperをする） 4番目が理想的な動作だと思いますので、できそうであればやってみてください。

a2s

2017/07/20 01:10

ありがとうございました！

行動規範の内容に同意します