アコーディオンが開いた時にボタンの位置を移動させたい

Question

添付の画像のように、
アコーディオンメニューが開いた時に、ボタンの位置を移動させたいです。

・青枠（2箇所）をクリックすると閉じる
・黄色の箇所の中身は可変

になってます。

ざっくりとしかイメージできないのですが、

おそらく、「acChild」の高さを取得し、
それを、cssの「translate」の値にいれるのかなとは思っています。

js初心者なので、間違っていたらすみません、、。

	//アコーディオンをクリックした時の動作
$('.acParent').on('click', function() {//タイトル要素をクリックしたら
	var findElm = $(this).next(".acChild");//直後のアコーディオンを行うエリアを取得し
	$(findElm).slideToggle();//アコーディオンの上下動作

	if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
		$(this).removeClass('close');//クラス名を除去し
	}else{//それ以外は
		$(this).addClass('close');//クラス名closeを付与
	}
});

<div class="acParent">ここクリックすると隠れている要素表示</div>

<div class="acChild">
　　　　<div class="acChild_ttl">子タイトル</div>
　　　　<div class="acChild_box">可変の中身可変の中身可変の中身可変の中身可変の中身</div>
</div>	

.acParent {
  position: relative;
}

.acParent:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
background-imags: url(../img/btn.png)
  position: absolute;
  bottom: 0;
  right: 50%;
}

.acParent.close::after {
  transform: rotate(0);
  transition: all 0.3s;
}

/*アコーディオンで現れるエリア*/
.acChild {
  display: none;
  /*はじめは非表示*/
}

Comments

[hatena19]

htmlを変更してもいいですか。
いいのなら、ボタンは、現状、疑似要素ですが、acChild の後に別要素として配置するのが簡単だと思います。

Answer 1

こんな感じでしょうか。
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/d3scg45w/

	<div class="acParent">ここクリックすると隠れている要素表示

		<div class="acChild">
			　　　　<div class="acChild_ttl">子タイトル</div>
			　　　　<div class="acChild_box">可変の中身可変の中身可変の中身可変の中身可変の中身</div>
		</div>
	</div>

		.acParent:after {
			content: "+";
			width: 2em;
			height: 2em;
			position: absolute;
			inset: auto 0;
			transform: translate(0, -1em);
		}

		.acParent.close::after {
			content: "-";
		}

			var findElm = $(this).children(".acChild");

Comments

[arisaan]

返事遅くなり申し訳ございません。

ありがとうございます！
おかげさまで無事解決しました！