How to make multiple read more read less buttons in the same one page

Question

What am I doing wrong here? I put each one into a separate ID however it still isn't working on my code. Please help it's for an assignment due in a few days!

function readMoreRome() { //finds function
    var dots = document.getElementById("dots"); //returns element that has the ID attribute with value, searches for dots
    var moreText = document.getElementById("more"); // '' '' searches for more
    var btnText = document.getElementById("myBtn"); // '' '' searches for myBtn

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Read more"; //button says read more to show more text
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; //button says read less to show less text
        moreText.style.display = "inline";
    }
}

function readMoreBuda() { //finds function
    var dots = document.getElementById("dots2"); //returns element that has the ID attribute with value
    var moreText = document.getElementById("more2"); // '' '' searches for more2
    var btnText = document.getElementById("myBtn2"); // '' '' searches for myBtn2

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Read more"; //button says read more to show more text
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Read less"; //button says read less 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. It is a relatively small city, however there are much to see and do.
        <span id="dots2">...</span>
        <span id="more2">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate 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, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
        <span id="dots3">...</span>
        <span id="more3"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí's work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
    </p>
    <button onclick="readMoreBarca()" id="myBtn3">Read more</button>
</div>

It works the first time, however the button doesn't work for the second? I changed the ID but it still isn't working. It works however it states the read more with all the text outward first, you have to click it multiple times for it to reconnect and work.

Solution 1

Well, you are not defining readMoreBarca()... You define readMoreRome() but this is never used.

You have code duplication, this is a bad practice, you should have a parameterized function like this:

function readMore(city) {
    let dots = document.querySelector(`.card[data-city="${city}"] .dots`);
    let moreText = document.querySelector(`.card[data-city="${city}"] .more`); 
    let btnText = document.querySelector(`.card[data-city="${city}"] .myBtn`);

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.textContent = "Read more";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.textContent = "Read less"; 
        moreText.style.display = "inline";
    }
}

<div class="card" data-city="buda">
    <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. It is a relatively small city, however there are much to see and do.
        <span class="dots">...</span>
        <span class="more" style="display: none;">Situated on thermal springs, there are many naturally heated baths to relax in, the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. There are many spectacular viewpoints in Budapest, great for capturing the views of the city. From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst famous European art. Classical music lovers will appreciate a performance at the Academy of Music.</span>
    </p>
    <button onclick="readMore('buda')" class="myBtn">Read more</button>
</div>
<br>
<div class="card" data-city="barca">
    <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, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. Facing the Mediterranean to the southeast,
        <span class="dots">...</span>
        <span class="more" style="display: none;"> the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell which was firstly designed for a town up in the mountains by artist Antoni Gaudí. Gaudí's work is admired by architects around the World as being one of the most unique and distinctive styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.</span>
    </p>
    <button onclick="readMore('barca')" class="myBtn">Read more</button>
</div>

Solution 2

Here is clarification code for those who are looking for a more specific example from code posted above.

`<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Show More/Less </title>

 <style>
 .j { width: 30em; text-align: justify; }
 .hide { display: none; }
 .pink { background-color: tan;  color: white; }
 b, span { cursor: pointer; }
</style>

</head>
<body>
<p class="j">Budapest is the capital city of Hungary. 
It is best known for its arts and culture. 
It is a relatively small city, however there are much to see and do.

 <b class="pink" onclick="evtEllipse(this)">&hellip;</b>

 <span class="hide" onclick="spanEllipse(this)">
Situated on thermal springs, there are many naturally heated baths to relax in, 
the Széchenyi baths are the largest with 15 indoor baths and 3 outdoor. 
There are many spectacular viewpoints in Budapest, great for capturing the views of the city. 
From 360 panoramic views up at St Stephens Basilica to a wide view of the parliament 
and the River at Fisherman’s Bastion. Visit the Museum of Fine Arts and enjoy a day amongst 
famous European art. Classical music lovers will appreciate a performance at the Academy of Music. 
</span>
</p>

<p class="j">
Barcelona, framed for its individuality, cultural interest, and physical beauty, home to art and architecture. 
Facing the Mediterranean to the southeast,

 <b class="pink" onclick="evtEllipse(this)">&hellip;</b>

 <span class="hide" onclick="spanEllipse(this)">
the city is one of a kind. Upon visiting make sure you visit the spectacular and unique Park Güell 
which was firstly designed for a town up in the mountains by artist Antoni Gaudí. 
Gaudí's work is admired by architects around the World as being one of the most unique and distinctive 
styles in modern architecture. Other places worth visiting is the La Sagrada Família, is a giant basilica. 
With beaches on your doorstop, and art and city culture, this diverse city has everything to offer.
 </span>
</p>

<script>
// For: http://www.webdeveloper.com/forum/showthread.php?364215-Show-only-first-line-of-a-paragraph&p=1508263#post1508263
function evtEllipse(info) {
  info.nextElementSibling.classList.toggle('hide');
  info.classList.toggle('hide');
}
function spanEllipse(info) {
  info.classList.toggle('hide');
  info.previousElementSibling.classList.toggle('hide')
}
</script>
</body>
</html>
`

Comments

[Maurici Abad]

How is this supposed to help? Its not related at all.

[jmrker]

The contents of the read more/less sections in this example are for display of some lines/words/characters only. They are meant to be gibberish. The important parts are the layout portion of the HTML and the JS functions. They can be used to create the read more/less displays. Will be glad to provide a more specific example if requested.

[jmrker]

Here is clarification code for those who are looking for a more specific example from code posted above. `