jQueryで表示非表示ボタンを作る方法

質問内容

jQueryで表示と非表示を切り替えるボタンを作っているのですが、行き詰ったので質問させていただきます。
一応下記のコードで動作はしているのですが、このままだと同じボタンを複数作ったときに１つボタンを押したらすべて表示されてしまうので困っています。
ボタンと表示非表示を切り替える要素を対応付けるような仕組みはないのでしょうか？

またjQueryのコード自体もどこか煩雑ですっきりしないので、何か指摘などありましたら教えていただけると幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5    </head>
6    <body>
7        <p>
8            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
9            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
10            <span class="hide" style="display: none;">
11                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
12                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
13                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
14                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
15                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
16                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
17                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
18                bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
19            </span>
20        </p>
21        <button class="readmore-button">Read more</button>
22        
23        <script src="script.js"></script>
24    </body>
25</html>

javascript
1$('.hide').hide();
2
3$('.readmore-button').click(function(){
4    if($('.hide').css('display') === 'none'){
5        $('.hide').show();
6        $('.readmore-button').html('Close');
7    }else{
8        $(".hide").hide();
9        $('.readmore-button').html('Read more');
10    }
11})

m.ts10806

2022/10/14 07:47

質問タグのJSFは本件と関係ないと思います。 https://teratail.com/tags/JavaServer%20Faces

mozuku_123

2022/10/14 07:48

すみません。タグをつけ間違えました。ご指摘ありがとうございます。

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

回答2件

ベストアンサー

提示されたHTMLの構造が微妙ですが、いまのHTMLをベースにするならこんな感じで

javascript
1<script>
2$(function(){
3  $('.hide').hide();
4  $('.readmore-button').on('click',function(){
5    $(this).text($('.hide',$(this).prev()).toggle().is(':hidden')?"Read more":"Close");
6  });
7});
8</script>
9<p>
10aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
11aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
12<span class="hide">
13bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
14bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
15bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
16bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
17bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
18bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
19bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
20bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
21</span>
22</p>
23<button class="readmore-button">Read more</button>
24
25<p>
26ccccccccccccccccccccccccccccc<br>
27ccccccccccccccccccccccccccccc<br>
28<span class="hide">
29ddddddddddddddddddddddddddddd<br>
30ddddddddddddddddddddddddddddd<br>
31ddddddddddddddddddddddddddddd<br>
32ddddddddddddddddddddddddddddd<br>
33ddddddddddddddddddddddddddddd<br>
34ddddddddddddddddddddddddddddd<br>
35ddddddddddddddddddddddddddddd<br>
36ddddddddddddddddddddddddddddd<br>
37</span>
38</p>
39<button class="readmore-button">Read more</button>

投稿2022/10/14 08:13

編集2022/10/14 08:17

yambejp

総合スコア114829

押したボタンの → 前にある<p>タグの → 中にある<span>　の表示非表示を切り替える方法はいかがでしょうか？
また、表示非表示の切り替えを.is-hiddenclassでしてみました。

動作確認用サンプル：https://jsfiddle.net/shp91uwe/

html
1<p>
2  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
3  <span class="detail">bbbbbbbbbbbbbbbbbbb</span>
4</p>
5<button class="readmore-button">Read more</button>
6
7<hr>
8
9<p>
10  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
11  <span class="detail">bbbbbbbbbbbbbbbbbbb</span>
12</p>
13<button class="readmore-button">Read more</button>
14
15<hr>
16
17<p>
18  aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
19  <span class="detail">bbbbbbbbbbbbbbbbbbb</span>
20</p>
21<button class="readmore-button">Read more</button>

css
1.is-hidden {
2  display: none;
3}

javascript
1$(document).ready(function() {
2	// ページロード時、全ての隠すspanにclassをつける（＝非表示にする）
3	$('.detail').addClass('is-hidden');
4  
5  $('.readmore-button').on('click', function() {
6  	// 対象のspanを取得（押したボタンの、前のpタグの、子要素の.detail
7		const targetElem = $(this).prev('p').find('.detail');
8    
9    // 対象のspanが、非表示のためのclassを持っていたら
10    if (targetElem.hasClass('is-hidden')) {
11    	// 押したボタンの中身の文字を「Close」にする
12    	$(this).text('Close');
13    } else {
14    	// 押したボタンの中身の文字を「Read more」にする
15    	$(this).text('Read more');
16    }
17    
18    // 対象のspanにclassをつける・はずすを交互に
19    targetElem.toggleClass('is-hidden');  
20  })
21});