Readmore button for multiple div's

Question

I am trying it to make it that everytime you press the button 'Lees meer' it will show more text. The code downbelow works for 1 but when I added several div's with teh same function it is not working anymore... Can someone help me to make it that everytime you press the button it will show more text?

 function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Lees minder"; moreText.style.display = "inline"; } }

 #more { display: none; }

 <div class="spidermanMovie"> <h2> Spider-man: Homecomming.</h2> <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the sixteenth film in the Marvel Cinematic Universe (MCU). <span id="dots">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p> <button onclick="myFunction()" id="myBtn">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div> <div class="deadpoolMovie"> <h2> Spider-man: Homecomming.</h2> <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the sixteenth film in the Marvel Cinematic Universe (MCU). <span id="dots">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p> <button onclick="myFunction()" id="myBtn">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div> <div class="thorMovie"> <h2> Spider-man: Homecomming.</h2> <p>Deadpool is a 2016 American superhero film based on the Marvel Comics character of the same name. Distributed by 20th Century Fox, it is the eighth film in the X-Men film series and the first standalone Deadpool film. <span id="dots">...</span><span id="more"> Directed by Tim Miller from a screenplay by Rhett Reese and Paul Wernick, the film stars Ryan Reynolds as Wade Wilson / Deadpool alongside Morena Baccarin, Ed Skrein, TJ Miller, Gina Carano and Brianna Hildebrand. In the film, Wilson—as the antihero Deadpool—hunts down the man who gave him mutant abilities and caused his scarred physical appearance.</span></p> <button onclick="myFunction()" id="myBtn">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div>

Answer 1

The problem caused by document.getElementById() method within myFunction() body which performs look up for a single matching element (first one in case of multiple matches).

So, what you need is, basically:

• remove non-unique id 's from your HTML (as it violates uniqueness of this attribute which the name implies)
• use class attribute to mark all of your elements that supposed to behave in a same manner
• pass event.target as myFunction() parameter to handle specific paragraph only

That concept (trimmed for simplicity sake and adapted as close as I could to your existing codebase), would look, like:

 function myFunction(p) { const parent = p.parentElement, moreText = parent.getElementsByClassName("more")[0], btnText = parent.getElementsByClassName("myBtn")[0], dots = parent.getElementsByClassName('dots')[0] if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Lees minder"; moreText.style.display = "inline"; } }

 .more { display: none; }

 <div id="spidermanMovie"> <h2> Movie 1</h2> <p>Short story 1. <span class="dots">...</span><span class="more">The rest of story 1</span></p> <button onclick="myFunction(this)" class="myBtn">Lees meer</button> </div> <div id="deadpoolMovie"> <h2> Movie 2</h2> <p>Short story 2. <span class="dots">...</span><span class="more">The rest of story 2</span></p> <button onclick="myFunction(this)" class="myBtn">Lees meer</button> </div> <div id="thorMovie"> <h2>Movie 3</h2> <p>Short story 3. <span class="dots">...</span><span class="more">The rest of story 3</span></p> <button onclick="myFunction(this)" class="myBtn">Lees meer</button> </div>

However, to make your HTML part a bit cleaner and more easy to maintain, I'd replace inline onclick attributes with single event listener callback ( EventTarget.addEventListener() ), attached to corresponding elements within your JavaScript file.

Answer 2

Currently, you are using the same id s multiple time across your elements. A quick and easy fix is to change them to class es instead. I would also recommend adding a common class to the parent div and changing the class names to something more semantic. Here is my suggestion:

<div class="movie" id="spiderman">
    <h2>Spider-man: Homecomming.</h2>
    <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the
    sixteenth film in the Marvel Cinematic Universe (MCU).
      <span class="dots">...</span><span class="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p>
    <button onclick="myFunction()" class="showMoreButton">Lees meer</button>
    <img class="preview" src="img/spidermanfilm.jpg">
</div>

For the sake of separation of concerns (or here, separation of HTML, CSS and JavaScript), let's also get rid of the onclick attribute on the button s:

<button class="showMoreButton">Lees meer</button>

The next step is to adapt your JavaScript accordingly. First, it now needs to find the elements by class name instead of id . The easy and modern way of doing this is by using querySelectorAll() which allows you to grab all elements that match the given CSS selector. For now, let's just grab the buttons:

let buttons = document.querySelectorAll(".showMoreButton");

As we've removed the onclick attribute, we will now use addEventListener() to assign an event handler function to every button:

for (let button of buttons) {
    button.addEventHandler("click", onShowMoreHandler);
}

The function onShowMoreHandler() will now be called when one of the buttons is clicked. Event handler functions will receive an event object that contains a reference to the element that has triggered the event. From there, we can work our way up the DOM using parentNode to find the div , which will then allow us to find and manipulate the relevant span s:

function onShowMoreHandler(event) {
    let button = event.target;
    let movie = button.parentNode;
    let dots = movie.querySelector(".dots");
    let more = movie.querySelector(".more");

    // Now do the magic!
}

I think you can take it from here. Don't forget to add error handling, for example if one of the querySelector*() functions couldn't find the elements you were looking for.

Answer 3

You need to have differnt span id's for dot1 and dot2 . Different id's for button's as well.

 function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Lees minder"; moreText.style.display = "inline"; } } function myFunction1() { var dots1 = document.getElementById("dots1"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn1"); if (dots1.style.display === "none") { dots1.style.display = "inline"; btnText.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots1.style.display = "none"; btnText.innerHTML = "Lees minder"; moreText.style.display = "inline"; } } function myFunction2() { var dots2 = document.getElementById("dots2"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn2"); if (dots2.style.display === "none") { dots2.style.display = "inline"; btnText.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots2.style.display = "none"; btnText.innerHTML = "Lees minder"; moreText.style.display = "inline"; } }

 #more { display: none; }

 <div class="spidermanMovie"> <h2> Spider-man: Homecomming.</h2> <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the sixteenth film in the Marvel Cinematic Universe (MCU). <span id="dots">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p> <button onclick="myFunction()" id="myBtn">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div> <div class="deadpoolMovie"> <h2> Spider-man: Homecomming.</h2> <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the sixteenth film in the Marvel Cinematic Universe (MCU). <span id="dots1">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p> <button onclick="myFunction1()" id="myBtn1">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div> <div class="thorMovie"> <h2> Spider-man: Homecomming.</h2> <p>Deadpool is a 2016 American superhero film based on the Marvel Comics character of the same name. Distributed by 20th Century Fox, it is the eighth film in the X-Men film series and the first standalone Deadpool film. <span id="dots2">...</span><span id="more"> Directed by Tim Miller from a screenplay by Rhett Reese and Paul Wernick, the film stars Ryan Reynolds as Wade Wilson / Deadpool alongside Morena Baccarin, Ed Skrein, TJ Miller, Gina Carano and Brianna Hildebrand. In the film, Wilson—as the antihero Deadpool—hunts down the man who gave him mutant abilities and caused his scarred physical appearance.</span></p> <button onclick="myFunction2()" id="myBtn2">Lees meer</button> <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" /> </div>

Answer 4

I think this would be the fix for your problem with least amount of modifications to your html markup & no change to your css .

I have mainly tinkered the javascript function of yours & now you don't even have to call it anymore!

Please note that ids is 'html' have to be unique , this was the reason behind your problem. Hope it helps!

 var moreBtn = document.getElementsByClassName("myBtn"); var toggleMoreText = function() { const parent = this.parentElement, moreText = parent.getElementsByClassName("more")[0], btnMore = parent.getElementsByClassName("myBtn")[0], dots = parent.getElementsByClassName('dots')[0]; // console.log(moreText.textContent); if (dots.style.display === "none") { dots.style.display = "block"; btnMore.innerHTML = "Lees meer"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnMore.innerHTML = "Lees minder"; moreText.style.display = "block"; } }; for (var i = 0; i < moreBtn.length; i++) { moreBtn[i].addEventListener('click', toggleMoreText, false); }

 .more { display: none; }

 <div id="spidermanMovie"> <h2> Spider-man: Homecomming.</h2> <p>Short story 1. <span class="dots">...</span> <span class="more">The rest of story 1</span></p> <button class="myBtn">Lees meer</button> </div> <div id="deadpoolMovie"> <h2> Deadpool</h2> <p>Short story 2. <span class="dots">...</span> <span class="more">The rest of story 2</span></p> <button class="myBtn">Lees meer</button> </div> <div id="toystoryMovie"> <h2> Toy Story 2</h2> <p>Short story 3. <span class="dots">...</span> <span class="more">The rest of story 3</span></p> <button class="myBtn">Lees meer</button> </div>