Changing css style with document.getElementsByClassName

Question

In CSS I am trying to assign multiple elements ids to a class and change their display property to "none" using a javascript with both document.getElementsByClassName and style.display. In css I used #content.myClass which I found in this article.

I am doing this to reduce the unique selectors and keep my code efficient.

html:

  <p id="toy-pictures-latest" class="panel">Latest Toy Pictures</p><br>
         <p id="toy-pictures-greatest" class="panel">Greatest Toy Pictures</p>

css:

#toy-pictures-latest.panel{
    display: inline;
}

#toy-pictures-greatest.panel{
        display: inline;
}

js:

document.getElementsByClassName('panel').style.display = "none";

codepen

It doesn't appear to be making the text vanish as expected. How should I approach this? No jQuery, please.