Переключение скрыть/показать блок при работе с атрибутами

Есть код: Кнопки

<ul>
 <li><span data-what="one"><a class=".button"></a></span></li>
</ul>
<ul>
 <li><span data-what="two"><a class=".button"></a></span></li>
</ul>

Блоки

<div id="one_box" class="hide">for One</div>
<div id="two_box" class="hide">for Two</div>

Функция для переключения, часть написана на чистом JS, я могу только добавить JQ

this.click = function(span) {
var a = span.firstChild;

$(`#${$(span).data('what')}_box`).removeClass('hide');

Нажатие на первую <a> открывает блок one_box. Нажатие на вторую открывает и two_box. Как сделать так, чтобы при нажатии на другую <a>, ненужный блок скрывался?