ページ内で「続きを読む」ボタンを複数使いたい

質問

web、コーディングに詳しいかた助けてください！

「続きを読む」みたいなかんじで文章を展開させる箇所を、ページ内で複数作りたいと思っています。
下のコードを使いたいのですが、
ひとつの矢印ボタンを押すと、ページ内のすべての矢印が開いてしまいます……。

この見た目の矢印ボタンをページ内に複数置く場合、
どこを書き変えたら、ボタンのひとつずつの実行が可能でしょうか？
下記のコードをベースにした解決方法をご存知のかた、よろしくお願いいたします。

—————————
【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);
    });
});

—————————
なにか不躾でしたらすみません、よろしくお願いいたします！
参考にしたサイト https://achiyochi.jp/web/readmore-js/

回答No.2

retorofan

問題の原因は、.hide-textクラスを持つすべての要素が同時にスライドトグルされているためです。
ですから、クリックされた要素に関連する特定の要素だけをスライドトグルするように修正すればいいのです。

その一例として、prev()メソッドを用いることです。
これは、指定された要素の直前の兄弟要素を選択します。

下記のようにJSコードを修正するだけで問題解決します。
<script>
// new
$(function(){
$(".readmore").on("click", function() {
$(this).toggleClass("on-click");
$(this).prev(".hide-text").slideToggle(1000);
});
});
</script>

なお、記事のレイアウトも
CSSを次のように修正したらbetterだと思います。
#text-wrap {
width: 50%;
display: block;
margin: 0 auto;

/* old
padding: 70px;
*/

padding: 0 70px; /* new */
}

回答No.1

t_ohta

続きを読むで表示させたいコンテンツのタグ（<div class="hide-text">）個々にIDを割り振ります。
それぞれのボタンにどのIDのタグを表示させた以下の情報を持たせます。
jQueryで書いているブログラムではIDを指定してsliderを実行します。