- 締切済み
「続きを読む」ボタンを複数使いたい
web、コーディングに詳しいかた助けてください！ 「続きを読む」みたいなかんじで文章を展開させる箇所を、ページ内で複数作りたいと思っています。 https://achiyochi.jp/web/readmore-js/ アコーディオンメニューでよく見るdetailsやsummaryでなく、こちらの方法で実現したいと思っているのですが、 複数使った場合、ひとつの矢印をクリックしただけで、ページ内の全ての矢印が開閉されていまいます。 class名を変えるとひとつずつ開閉ができるのですが、同じ要素にいちいち同じCSSを書くのもややこしくなりそうで……。 どこを書き変えたら、ボタンのひとつずつの実行が可能でしょうか？ よろしくお願いいたします。 webデザイン HTML JavaScript jQuery
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- retorofan
- ベストアンサー率34% (435/1276)
補足を拝見しました。 あらたな質問投稿でおねがいします。 そうでないと、永遠に補足、回答が続いてしまい、 OKWAVEに迷惑をかけてしまいます。
- retorofan
- ベストアンサー率34% (435/1276)
＞複数使った場合、ひとつの矢印をクリックしただけで、ページ内の全ての矢印が開閉されていまいます。 あなたの、そのコードが描かれていないため確認できず、 修正プランも提示できません。 サンプルサイト https://achiyochi.jp/web/readmore-js/ これだと、率直に申し上げて ＣＳＳのところでヤル気が失せる人がいるかも。 ■「続きを読む」ボタンを複数使いたい 次のようなサンプルコードを作りました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Sample</title> <style> .container { width: 80vw; height: 80vh; border: solid 1px gray; } .article { border-bottom: dotted 1px gray; } .content { display: none; } </style> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(document).ready(function() { $('.toggle-button').click(function() { var $button = $(this); var $content = $button.next('.content'); $content.slideToggle(500, function() { if ($content.is(':visible')) { $button.text('続きを閉じる'); } else { $button.text('続きを読む'); } }); }); }); </script> </head> <body> <div class="container"> <div class="article"> <p>記事1の内容...</p> <button class="toggle-button">続きを読む</button> <div class="content"> <p>記事1の内容.続き</p> </div> </div> <div class="article"> <p>記事2の内容...</p> <button class="toggle-button">続きを読む</button> <div class="content"> <p>記事2の内容.続き</p> </div> </div> <div class="article"> <p>記事3の内容...</p> <button class="toggle-button">続きを読む</button> <div class="content"> <p>記事3の内容.続き</p> </div> </div> </div> </body> </html> ご参考になれば幸いです。
お礼
ご回答ありがとうございます！ ですがこちらが浅学なため、 教えていただいた方法を、リンク先のコードにうまく組み込んで動かすことができませんでした。 初心者なのに質問してしまってすみませんでした……。
補足
質問に慣れておらず、すみませんでした！ 下のコード（リンク先のデザインのものがこれです）を使いたいのですが、 ひとつの矢印ボタンを押すと、全部の矢印が開いてしまいます……。 矢印ボタンをページ内に複数置く場合に、どこを書き変えればいいのかわからず困っています。これをベースにした解決方法、わかりますか……？ 【HTML】 <div id="text-wrap"> <div class="show-text"> 吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。 吾輩はこゝで始めて人間といふものを見た。然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。 </div> <div class="hide-text"> 此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。 然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。 但（たゞ）彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許（ばか）りである。 掌の上で少し落ち付いて書生の顔を見たのが所謂（いはゆる）人間といふものゝ見始（みはじめ）であらう。 此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐（やくわん）だ。其後猫にも大分逢つたがこんな片輪には一度も出會（でく）はした事がない。 加之（のみならず）顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟（けむり）を吹く。 どうも咽（む）せぽくて實に弱つた。是が人間の飲む烟草（たばこ）といふものである事は漸く此頃（このごろ）知つた。 </div> <button class="readmore">READ MORE</button> </div> <div id="text-wrap"> <div class="show-text"> あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 </div> <div class="hide-text"> またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。 </div> <button class="readmore">READ MORE</button> </div> 【CSS】 p { text-align: center; font-size: 16px; color: #666; line-height: 2.5; margin: 0; } #text-wrap { width: 50%; height: 100%; display: block; margin: 0 auto; padding: 70px; } .hide-text { display: none; } button.readmore { position: relative; height: 80px; width: 90px; margin: 40px auto; display: block; background-color: transparent; color: #666; padding-bottom: 40px; border: none; outline: 0; transition: .5s; -erbkit-transition: .5s; } button.readmore::after { content: " "; position: absolute; width: 30px; height: 30px; border-top: solid 3px #666; border-right: solid 3px #666; transform: rotate(135deg); -webkit-transform: rotate(135deg); right: 28px; top: 25px; transition: .5s; -erbkit-transition: .5s; } button.readmore:hover::after { top: 40px; } .on-click { color: transparent!important; } .on-click { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } 【jQuery】 $(function(){ $(".readmore").on("click", function() { $(this).toggleClass("on-click"); $(".hide-text").slideToggle(1000); }); });
お礼
わかりました。 ルール等よくわからず失礼しました！