アコーディオンが閉じた時に元の場所に戻したい

実現したいこと

アコーディオンを実装していますが、アコーディオンが閉じた時に変な位置になってしまうので元の場所に戻したい

発生している問題・分からないこと

アコーディオンを実装していますが、アコーディオンが閉じた時に変な位置になってしまうので元の場所に戻したい

該当のソースコード

html
1	<div class="answer">
2		<ul class="history">
3			<li>
4				<div class="num"></div>
5				<div class="txt_area">
6					<h4>テスト</h4>
7					<p>テストテストテストテスト</p>
8				</div>
9			</li>
10
11		</ul>
12	</div>
13	<div class="question">
14	  <p></p>
15	</div>
16

js
1//アコーディオン
2jQuery(function ($) {
3  $(".answer").css("display", "none");
4  // 質問の答えをあらかじめ非表示
5  
6  //質問をクリック
7  $(".question").click(function () {
8    
9    $(".question").not(this).removeClass("open");
10    //クリックしたquestion以外の全てのopenを取る
11
12    $(".question").not(this).slideUp(300);
13    //クリックされたquestion以外のanswerを閉じる
14    
15    $(this).toggleClass("open");
16    //thisにopenクラスを付与
17    
18    $(".answer").slideToggle(300);
19    //thisのcontentを展開、開いていれば閉じる
20  
21  });
22});

css
1/*アコーディオン全体*/
2 .question{
3  position: relative;
4  margin: 30px auto 0;
5  font-size: 1em;
6  font-weight: bold;
7  cursor: pointer;
8	background: #003559;
9	height: 32px;
10	width: 680px;
11}
12.question:hover{
13    text-decoration:underline;
14}
15
16 .question:after {
17  content: "";
18  position: absolute;
19  right: 49%;
20  top: 8px;
21  transition: all 0.2s ease-in-out;
22/*   要素の動きを指定 */
23  
24  display: block;
25  width: 8px;
26  height: 8px;
27  border-top: solid 4px #fff;
28  border-right: solid 4px #fff;
29  
30  -webkit-transform: rotate(135deg);
31  transform: rotate(135deg);
32/* transform: rotateで要素の角度を指定 */
33  
34}
35
36.question.open:after {
37  -webkit-transform: rotate(-45deg);
38  transform: rotate(-45deg);
39  top: 13px;
40/*   .openクラスがついた時の要素の角度を指定 */
41}
42#lp50th02 .answer{
43 }
44

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

アコーディオンを作ることは出来たが上記の問題が発生している。

補足

特になし

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

回答1件

//アコーディオン
jQuery(function ($) {
$(".answer").css("display", "none");
// 質問の答えをあらかじめ非表示

//質問をクリック
$(".question").click(function () {

$(".question").not(this).removeClass("open");
//クリックしたquestion以外の全てのopenを取る

$(".question").not(this).slideUp(300);
//クリックされたquestion以外のanswerを閉じる

$(this).toggleClass("open");
//thisにopenクラスを付与

$(".answer").slideToggle(300);
//thisのcontentを展開、開いていれば閉じる

if( !$(this).is(".open") ){

  var offset = $(this).parent().offset().top;

  $(window).scrollTop( offset );

}

});

投稿2024/01/12 02:09

mii_md

総合スコア0