My website features a convenient Read More/Read Less button to manage lengthy text sections. You can check out my website at the link provided: () However, I have encountered an issue when using the Read Less Button to collapse the expanded area—it doesn't return to the original position on the page. It seems to lose its place entirely. Below is an example of the code I have implemented.
function readMoreRome() { //locates function
var dots = document.getElementById("dots"); //finds element with ID attribute value 'dots'
var moreText = document.getElementById("more"); // finds element with ID attribute value 'more'
var btnText = document.getElementById("myBtn"); // finds element with ID attribute value 'myBtn'
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //displays 'Read more' when clicked to show more text
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //displays 'Read less' when clicked to show less text
moreText.style.display = "inline";
}
}
function readMoreBuda() { //locates function
var dots = document.getElementById("dots2"); //finds element with ID attribute value 'dots2'
var moreText = document.getElementById("more2"); //finds element with ID attribute value 'more2'
var btnText = document.getElementById("myBtn2"); //finds element with ID attribute value 'myBtn2'
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; //displays 'Read more' when clicked to show more text
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; //displays 'Read less' when clicked to show less text
moreText.style.display = "inline";
}
}<div class="card">
<h2>Visit Budapest</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> November 12, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 2 comments</span> </div>
<div class="img"><img src="img/szechenyi.jpg" style="height:200px;"> </div>
<p><i>Széchenyi Thermal Baths </i></p>
<p>
Budapest is the capital city of Hungary. It is best known for its arts and culture. Despite being relatively small, there are numerous attractions to explore.
<span id="dots2">...</span>
<span id="more2">Located on thermal springs, Budapest features many naturally heated baths such as the Széchenyi baths which boast 15 indoor baths and 3 outdoor ones. The city also offers breathtaking viewpoints, ideal for capturing panoramic views. From the 360-degree vistas at St Stephens Basilica to the scenic overlook of the parliament and river at Fisherman’s Bastion—there's something for everyone. Don't miss visiting the Museum of Fine Arts to immerse yourself in famous European art. If you're a fan of classical music, be sure to catch a performance at the Academy of Music.</span>
</p>
<button onclick="readMoreBuda()" id="myBtn2">Read more</button>
</div>
<br>
<div class="card">
<h2>Visit Barcelona</h2>
<div class="info"> <span class="date"><i class="far fa-calendar"></i> December 06, 2019</span> <span class="comment"><i class="far fa-comment-alt"></i> 5 comments</span> </div>
<div class="img"><img src="img/guell-park.jpg" style="height:200px;"></div>
<p><i>Park Güell </i></p>
<p>
Barcelona, renowned for its unique culture, artistic appeal, and stunning landscapes, boasts unparalleled art and architecture. Overlooking the Mediterranean Sea in the southeast,
<span id="dots3">...</span>
<span id="more3">the city embodies a one-of-a-kind charm. When in Barcelona, make sure to visit the exquisite Park Güell, initially designed by artist Antoni Gaudí for a mountain town. Gaudí's architectural style is globally admired for its uniqueness and distinctiveness. Another must-see attraction is La Sagrada Família, a massive basilica. With beaches nearby, abundant art, and rich urban culture, this diverse city offers a plethora of experiences.</span>
</p>
<button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>