javascript - document.getElementsByClassName で CSS スタイルを変更する

Question

CSS では、複数の要素 ID をクラスに割り当て、それらの表示プロパティを document.getElementsByClassName と style.display の両方で JavaScript を使用して「none」に変更しようとしています。css では、この記事で見つけた #content.myClass を使用しました。

一意のセレクターを減らし、コードを効率的に保つためにこれを行っています。

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";

コードペン

期待どおりにテキストが消えるようには見えません。これにどのようにアプローチすればよいですか？jQuery は使用しないでください。