Как мне установить скрытые элементы без определенного класса с помощью JQuery?

У меня есть несколько блоков на странице, все с классом" article ". Я использовал

$(".article:first").addClass("current");

, чтобы добавить класс" current "в первый блок с классом" article ". Я хочу, чтобы все остальные блоки div class = "article" были скрыты до тех пор, пока не будет нажата кнопка.

При загрузке страницы должен быть виден первый div class = "article". При нажатии кнопки должен появиться второй div и т. д.

Редактировать: Имеет ли значение, что блоки div class = "article" появляются в двух разделах div с разными классами?

<div class="roots">
   <div class="article">
   </div>
</div>
<div class="words">
   <div class="article">
   </div>
</div>

Придется ли мне обращаться к ним по-разному в JQuery?