アコーディオンを複数設置して個々に開閉したい

複数のアコーディオンを設置し、個々に開閉可能にしたいと考えています。

・デフォルトでは全てが閉じている
・クリックすると、クリックされたものだけ開く
・開いているものは、もう一度クリックすると閉じる

以下のサイトを参考に作成したものの
複数の場合は１つをクリックすると他も全て開いてしまうようです。
https://achiyochi.jp/web/readmore-js/

複数のアコーディオンを実装方法についてご教示いただけますと幸いです。
よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<div id="text-wrap">
2 <div class="textarea hide-text">
3　 <p>ここに文字が隠れている</p>
4 </div>
5 <button class="readmore">READ MORE</button>
6</div>

css
1.hide-text {
2    display: none;
3}
4.readmore{
5		display: block;
6	} 
7 
8button.readmore{
9    height: 80px;
10    position: relative;
11	width: 90px;
12    margin: 10px auto;
13    display: block;
14    background-color: transparent;
15    color: #747474;
16	font-size: 11px;
17    letter-spacing: 1px;
18    padding-bottom: 45px;
19    border: none;
20    outline: 0;
21    transition: .5s;
22    -erbkit-transition: .5s;
23	
24}
25 
26button.readmore::after {
27    content: " ";
28    position: absolute;
29    width: 20px;
30    height: 20px;
31    border-top: solid 1px #747474;
32    border-right: solid 1px #747474;
33    transform: rotate(135deg);
34    -webkit-transform: rotate(135deg);
35    right: 35px;
36    top: 25px;
37    transition: .5s;
38    -erbkit-transition: .5s;
39}
40 
41button.readmore:hover::after {
42    top: 40px;
43}
44
45
46.on-click {
47    color: transparent!important;
48}
49 
50.on-click {
51    transform: rotate(-180deg);
52    -webkit-transform: rotate(-180deg);
53}
54	}
55

javascript
1$(function(){
2    $(".readmore").on("click", function() {
3		$(this).toggleClass("on-click");
4		$(".hide-text").slideToggle(500);
5    });
6});

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

回答3件

開く要素をクラス名で指定するのではなく、位置関係（直前の要素）で指定するといいでしょう。

js
1$(function(){
2    $(".readmore").on("click", function() {
3        $(this).toggleClass("on-click");
4        $(this).prev().slideToggle(500);
5    });
6});

投稿2021/09/08 05:56

hatena19

総合スコア33795

すべての.hide-textにslideToggle(500)が適用されてしまっているので、兄弟要素のみに適用するようにします。

jQuery
1$(function(){
2    $(".readmore").on("click", function() {
3        $(this).toggleClass("on-click");
4        $(this).siblings(".hide-text").slideToggle(500);
5    });
6});

投稿2021/09/08 05:52

oran

総合スコア50

ベストアンサー

javascript
1$(function(){
2  $(".readmore").on("click", function() {
3    $(this).toggleClass("on-click").prev(".hide-text").slideToggle(500);
4  });
5});