javascript アコーディオンでの開閉について

実現したいこと

一つの続きを読むを押すと他の要素の続きを読む部分も開いてしまうのを独立して個別で表示されるようにしたい。

html
1<p class="btn_read btn_read01">続きを読む</p>
2<p>コンテンツoff</p>
3<p class="read_on">コンテンツon</p>
4<p class="btn_close btn_close01">閉じる</p>
5
6<p class="btn_read btn_read02">続きを読む</p>
7<p>コンテンツoff</p>
8<p class="read_on">コンテンツon</p>
9<p class="btn_close btn_close02">閉じる</p>
10
11<p class="btn_read btn_read03">続きを読む</p>
12<p>コンテンツoff</p>
13<p class="read_on">コンテンツon</p>
14<p class="btn_close btn_close03">閉じる</p>

css
1	.read_on{
2		display: none;
3	}
4	.btn_close{
5		display: none;
6	}

javascript
1	$(function(){
2		$("p.btn_read").on("click", function(){
3			$(this).next().slideToggle();
4			$('.read_on').slideDown();
5			$('p.btn_read').css('display','none');
6			$('p.btn_close').css('display','block');
7		})
8		$("p.btn_close").on("click", function(){
9			$('p.btn_read').css('display','block').next().slideToggle();
10			$('p.btn_close').css('display','none');
11			$('.read_on').slideUp();
12		})
13	})
14

kei344

2019/04/23 13:40

HTML側でクラスread_onが設定されている要素がありませんが、間違っていませんか？

kakeru99

2019/04/24 01:03

kei344さん＞＞すみません！修正させていただきました。宜しくおねがいします！

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

回答1件

ベストアンサー

常に対象が一つになるように

jQuery
1        $("p.btn_read").on("click", function(){
2            $(this).css('display', 'none').next().slideUp().next().slideDown().next().css('display', 'block');
3        });
4
5        $("p.btn_close").on("click", function(){
6            $(this).css('display', 'none').prev().slideUp().prev().slideDown().prev().css('display', 'block');
7        });

投稿2019/04/24 02:40