I have a collection of unique artwork displayed on my website, each accompanied by a brief description.
<div>
<h2>Emotions in Motion</h2>
<p>
This piece is a captivating blend of vibrant colors and intricate details that beautifully captures the essence of human emotion. The artist's profound message about the metamorphosis of individuals is skillfully conveyed through this dynamic work of art.
<span id="text">
<br />
"Emotions in Motion" is a powerful reflection of humanity, showcasing a range of emotions from joy to sorrow. It conveys raw emotion and invites viewers to interpret its meaning based on their own experiences. This post-modernist masterpiece demands attention and resonates with viewers on a personal level.
<br />
The contrast between chaos and harmony in this artwork creates a thought-provoking narrative that speaks to the complexity of existence. As you gaze upon it, you may find yourself discovering new facets of your own life reflected back at you.
</span>
</p>
<button id="toggle" class="astext">Read More</button>
</div>
<div>
<h2>Beyond Reality</h2>
<p>
"Beyond Reality" is an emotional journey that transcends the boundaries of imagination. This deeply reflective piece challenges perceptions and inspires introspection. The artist's intent to evoke self-realization and acceptance is evident in every brushstroke.
<span id="text">
<br />
At its core, "Beyond Reality" is a harmonious blend of supernatural elements and earthly beauty. It offers a glimpse into the artist's vision and their intimate connection to the world around them. Through this artwork, viewers can explore themes of identity, transformation, and the human experience.
<br />
Delve deeper into "Beyond Reality" to uncover hidden layers of meaning and symbolism. Despite its chaotic appearance, this piece ultimately conveys a sense of balance and unity, inviting contemplation and sparking dialogue.
</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 additional text content is initially hidden using CSS properties #text {display: none;}
In order to reveal the hidden text when the corresponding button is clicked, JavaScript/jquery code is utilized as follows:
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Read More") {
//Show more text when button is in 'Read More' state
$("#toggle").text("Read Less");
$("#text").slideDown();
} else {
//Hide text when button is in 'Read Less' state
$("#toggle").text("Read More");
$("#text").slideUp();
}
});
});
Is there a way to streamline the script to handle multiple buttons and associated text sections dynamically?