アコーディオンメニューを閉じたら元の場所に戻させたい

実装したいことは、「もっと見る」ボタンをクリックして表示させたコンテンツを、「閉じる」ボタンをクリックした際に、元いた位置に戻すことです。

現状、「セクション5(アコーディオン)」の「もっと見る」をクリックすると、隠れているコンテンツがスライドで表示され、且つボタンのテキストは「閉じる」に切り替わります。しかし、「閉じる」をクリックすると、「コンテンツ７」あたりまで進んでおり、また上までスクロールしなければなりません。これを「閉じる」をクリックした際、元いた位置、もしくはセクション5の位置まで戻したいです。

考えた案としては、HTMLで「閉じる」ボタンを追加し、それをクリックしたら「セクション5」までスクロールで移動させることは考えました。しかし、ボタンは1つで元の位置まで戻したいと考えております。

今あるコードに追加でも、より良い書き方がございましたら書き直しでも構いません。ご教授何卒よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>aaa</title>
9
10  <link rel="stylesheet" href="./style.css">
11  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
12  <script src="./script.js"></script>
13</head>
14
15<body id="jump_01" class="pos_now">
16  <div class="contents">
17    <header>
18      <div class="header_inner">
19        <h1 class="header_logo">タイトル</h1>
20      </div>
21    </header>
22
23    <section class=" pos_now" id="jump_02">
24      <h2>セクション2</h2>
25
26      <p>aaaaaaaaaaaaaa</p>      
27      <p>aaaaaaaaaaaaaa</p>      
28      <p>aaaaaaaaaaaaaa</p>      
29    </section>
30
31    <section class="pos_now" id="jump_03">
32      <h2 >セクション３</h2>
33
34      <div>
35        <p>テキスト</p>
36        <p>テキスト</p>
37        <p>テキスト</p>
38        <p>テキスト</p>
39        <p>テキスト</p>
40      </div>
41    </section>
42
43    <section class="pos_now" id="jump_04">
44      <h2 >セクション4</h2>
45      <div>
46        <p>テキストテキストテキストテキストテキストテキストテキ</p>
47      </div>
48    </section>
49
50    <section class="pos_now" id="jump_05">
51      <h2 >セクション5(アコーディオン)</h2>
52
53      <ul class="list">
54        <li>
55          <div>aaa</div>
56          <p>あああああ</p>
57        </li>
58
59        <li>
60          <div>aaa</div>
61          <p>あああああ</p>
62        </li>
63
64        <li>
65          <div>aaa</div>
66          <p>あああああ</p>
67        </li>
68      </ul>
69
70      <!-- 隠れている部分 -->
71      <ul class="list hide">
72        <li>
73          <div>aaa</div>
74          <p>あああああ</p>
75        </li>
76
77        <li>
78          <div>aaa</div>
79          <p>あああああ</p>
80        </li>
81        
82        <li>
83          <div>aaa</div>
84          <p>あああああ</p>
85        </li>
86        
87        <li>
88          <div>aaa</div>
89          <p>あああああ</p>
90        </li>
91        
92        <li>
93          <div>aaa</div>
94          <p>あああああ</p>
95        </li>
96        
97        <li>
98          <div>aaa</div>
99          <p>あああああ</p>
100        </li>
101        
102        <li>
103          <div>aaa</div>
104          <p>あああああ</p>
105        </li>
106      </ul>
107      <!-- 隠れている部分 -->
108
109      <button class="more">もっと見る</button>
110    </section>
111
112    <section class="pos_now" id="jump_06">
113      <h2 >セクション6</h2>
114      <p>ああああああああああああああああ</p>
115    </section>
116
117    <section class="pos_now" id="jump_07">
118      <h2>タイトル7</h2>
119      <p>ああああああああああああああああ</p>
120    </section>
121
122    <section class="pos_now" id="jump_08">
123      <h2>タイトル8</h2>
124      <p>ああああああああああああああああ</p>
125    </section>
126
127    <section class="pos_now" id="jump_09">
128      <h2>タイトル9</h2>
129      <p>ああああああああああああああああ</p>
130    </section>
131
132    <section class="pos_now" id="jump_10">
133      <h2>タイトル10</h2>
134      <p>ああああああああああああああああ</p>
135    </section>
136
137
138
139  </div>
140
141</body>
142
143</html>

CSS
1body {
2  font-size: 16px;
3  color: #000000;
4  background: #226a42;
5  text-align: center;
6  margin: 0;
7}
8
9h1,h2, p {
10  margin: 0;
11}
12
13ul {
14  list-style: none;
15}
16
17section {
18  padding: 100px 0;
19}
20
21.contents {
22  max-width: 414px;
23  margin: auto;
24  background: #fff;
25  position: relative;
26  z-index: 5;
27}
28
29.list {
30  margin: 0;
31  padding: 0;
32}
33
34.list li {
35  width: 300px;
36  margin: auto;
37  border: 1px solid #226a42;
38  margin-bottom: 20px;
39  padding: 50px 0;
40}
41
42#jump_02 {
43  background: #7fba9a;
44}
45#jump_04 {
46  background: #7fba9a;
47}
48#jump_06 {
49  background: #7fba9a;
50}
51#jump_08 {
52  background: #7fba9a;
53}
54#jump_10 {
55  background: #7fba9a;
56}
57
58/*アコーディオン*/
59.more {
60  display: block;
61  background: #226a42;
62  color: #fff;
63  width: 275px;
64  margin: auto;
65  padding: 20px 0;
66  position: relative;
67}
68
69.more::after {
70  content: " ";
71  position: absolute;
72  width: 9px;
73  height: 9px;
74  border-top: solid 2px #fff;
75  border-right: solid 2px #fff;
76  -webkit-transform: rotate(135deg);
77          transform: rotate(135deg);
78  right: 32px;
79  top: 24px;
80  -webkit-transition: .5s;
81  transition: .5s;
82}
83
84.more.on-click::after {
85  -webkit-transform: rotate(-45deg);
86          transform: rotate(-45deg);
87  top: 45%;
88}
89
90.hide {
91  display: none;
92}

jQuery
1// アコーディオン
2$(function(){
3  $(".more").on("click", function() {
4    $('#jump_05').offset().top;
5    $(this).toggleClass("on-click");
6    $(".hide").slideToggle(1000);
7    if ($(this).text() === '閉じる') {
8      $(this).text('もっと見る');
9    } else {
10      $(this).text('閉じる');
11    }
12  });
13});

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

回答1件

ベストアンサー

js勉強中でよく分からないんですけど、これだとダサい(スマートではない)ですか？

$(function () {
  var posY = 0;
  $(".more").on("click", function () {
    $(this).toggleClass("on-click");
    $(".hide").slideToggle(1000);
    if ($(this).text() === '閉じる') {
      $(this).text('もっと見る');
      $('html, body').animate({ scrollTop: posY });
    } else {
      $(this).text('閉じる');
      posY = $(window).scrollTop();
    }
  });
});

$('html, body').animate({ scrollTop: posY });この記述が今も有効なのか分からないのに使いました。

投稿2022/04/16 07:11

recal

総合スコア1128

kyonu

2022/04/16 08:39

初めまして。ご回答ありがとうございます！いただいたコードに変更したところ想定する動きになりました。＞$('html, body').animate({ scrollTop: posY });この記述が今も有効なのか分からないのに使いました。 →こちらに関しては、調べてみたところ特に問題はないのかな？と感じました。実装方法がスマートであるかは私も分からないので、もうしばらく他の方のご意見も待ってみようと思いますmm

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