How can I make a "read-more" button for mutiple text elements?

  css, html, javascript, jquery

I have multiple images on my website with some text about each image.

<div>
    <h2>I still get butterflies</h2>
    <p>
        A virtuoso display of personality. A sophisticated layered piece that depicts dynamism and vibrancy while also betraying the turmoil and tranquility of humanity. The artist’s ode to the enduring Metamorphosis of an individual and so
        much more.
        <span id="text">
            <br />
            The artist’s personality is on full display. A breathtakingly beautiful piece; full of energy, light, sorrow, and pain. The artist’s vision will shake you to the very core. This hauntingly post-modernist piece is an exercise in
            raw emotion on canvas; that demands the full attention of the viewer. It is a raw un-tempered glimpse into the fabric of humanity. The vibrancy of colors harmoniously interact with the chaotic themes on display. This artwork
            pulls you in, what message you see in it, what themes you feel the artwork depict are entirely up to you. It will touch everyone differently. You and your guest will see a part of you depicted on the painting, a facet of your
            life laid bare.
            <br />
            &quot;I still get butterflies&quot; is a fascinating portrayal of humanity. The dance of colors, the vibrant display of personality and the chaotic themes on display perfectly gel together to depict the elegance and the reality
            of existence.
        </span>
    </p>
    <button id="toggle" class="astext">Read More</button>
</div>
<div>
    <h2>To levitate</h2>
    <p>
        &quot;To levitate&quot; is a thoughtful, emotional piece that transcends the fabric of reality. This piece appeals directly to the senses, beneath the incessant and formidable dance of colors is a rapturous delight. Ecstasy, so
        profound, so pure that it borders on angelic transformation.
        <span id="text">
            <br />
            &quot;To levitate&quot; is at its heart a deeply disquieting and disturbing display of strange nature that is at once entirely realistic and yet almost supernatural. It conveys a message of self-realization and self-acceptance:
            to break free from the chaos of life. The artist portrays a dazzling song that is beautifully pure. &quot;To levitate&quot; is a majestic creation of colors. It betrays the indefinable aroma of the artist&apos;s sincerity to
            their vision and intercourse with reality. The message of the piece transcends reality, borders on the supernatural, yet within that artistic expression is perhaps the most human message of all.
            <br />
            &quot;To levitate&quot; is a deeply feverish piece. At first glance the piece conveys a sense of chaos; it blends the supernatural with reality, but beneath all that chaos lies the harmony of colors, the artist&apos;s intention,
            and a beautifully sublime message.
        </span>
    </p>
    <button id="toggle" class="astext">Read More</button>
</div>
<div>
    <p>January 14<sup>th</sup>, 2021</p>
    <img data-src="./images/portfolio/5524E4534A898F56064C481CD305C703.webp" class="lazyload" alt="my image" />
</div>

The access text is hidden with css #text {display: none;}

Alongside with the HTML & CSS goes JS/jquery code to show the rest on the buttonclick

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
      //Stuff to do when btn is in the read more state
      $("#toggle").text("Read Less");
      $("#text").slideDown();
    } else {
      //Stuff to do when btn is in the read less state
      $("#toggle").text("Read More");
      $("#text").slideUp();
    }
  });
});

Is there a way to show the text according to what button was clicked, without having a seperate script for each?

Source: Ask Javascript Questions

LEAVE A COMMENT