Hide/reveal content on all div IDs with the same class

Question

I need some help with understanding how classes work with JavaScript.

Specifically what I want to accomplish is: Have the same class name that functions the same way on all div IDs.

On the example bellow I have two paragraphs that have a “more info button”. I want that button to show the hidden content on all other divs that have that class name. However it's only revealing the content of the first div, and not the second one.
Why is this happening?

 function infobtn() { var s = document.querySelector(".info"); if (s.style.display === "block") { s.style.display = "none"; } else { s.style.display = "block"; } } 

 #paragraph { float: left; width: 50%; height: auto; margin: 5% 20% 5% 0%; padding: 0% 0% 0% 0%; } #paragraph p { background: rgba(200, 200, 200, 0.5); width: 98%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } #paragraph2 { float: left; width: 50%; height: auto; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; } #paragraph2 p { background: rgba(200, 200, 255, 0.5); width: 99%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph2 .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph2 h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } 

 <div id="paragraph"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div> <div id="paragraph2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div id="class"> <h1> More info...</h1> </div> </div> 

Answer 1

According to the documentation, document.getQuerySelector gets only the first element that matches that selector. Your code will ONLY ever work on the first element.

Furthermore, reading your code, you only have one paragraph with the class info . So it will only affect that single paragraph.

That said, if you want to get all elements with the same class name use the document.getElementByClassName function.

function infobtn() {
  var s = document.getElementsByClassName(".info");
  var i;
  for (i = 0; i < s.length; i++) {
    if (s[i].style.display === "block") {
      s[i].style.display = "none";
    } else {
      s[i].style.display = "block";
    }
  }
}

All in all, what you're attempting to do would be better solved using JQuery . I'll recommend using that library when you get more experienced with JavaScript.

Answer 2

Only your first info section have the class info . I'm not sure what you're trying to do with id="class" .

Also, document.querySelector selects the first element with the given selector, to select all of them you need to use getElementsByClassName . Then you just need to add a for loop to loop through the selected elements see edited snippet:

 function infobtn() { var s = document.getElementsByClassName("info"); for (var i = 0; i < s.length; i++) { if (s[i].style.display === "block") { s[i].style.display = "none"; } else { s[i].style.display = "block"; } } } 

 #paragraph { float: left; width: 50%; height: auto; margin: 5% 20% 5% 0%; padding: 0% 0% 0% 0%; } #paragraph p { background: rgba(200, 200, 200, 0.5); width: 98%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } #paragraph2 { float: left; width: 50%; height: auto; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; } #paragraph2 p { background: rgba(200, 200, 255, 0.5); width: 99%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph2 .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph2 h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } 

 <div id="paragraph"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div> <div id="paragraph2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div>