質問内容
jQueryで表示と非表示を切り替えるボタンを作っているのですが、行き詰ったので質問させていただきます。
一応下記のコードで動作はしているのですが、このままだと同じボタンを複数作ったときに１つボタンを押したらすべて表示されてしまうので困っています。
ボタンと表示非表示を切り替える要素を対応付けるような仕組みはないのでしょうか？
またjQueryのコード自体もどこか煩雑ですっきりしないので、何か指摘などありましたら教えていただけると幸いです。
該当のソースコード
html
<!DOCTYPE html><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br> <span class="hide" style="display: none;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> </span> </p> <button class="readmore-button">Read more</button> <script src="script.js"></script> </body></html>
javascript
$('.hide').hide(); $('.readmore-button').click(function(){ if($('.hide').css('display') === 'none'){ $('.hide').show(); $('.readmore-button').html('Close'); }else{ $(".hide").hide(); $('.readmore-button').html('Read more'); }})
0 コメント