Переключение картинок между двумя button

Подскажите оптимальный способ : нужно по нажатию на первый button вывести первую картинку, по нажатию на второй button - вывести вторую картинку. Когда выводится одна картинка, - другая скрывается.
Пример кода:

div { display: inline-block; width: 400px; text-align: center; } button { font-size: 30px; } .apple { display: none; }

Ответ

Сделал универсальный и обновленный вариант на 4 строчки jQuery:
$('.box').on('click', '.btn', (e)=> { const srcAttr = $(e.target).data('src'); $('.image').css('background-image', `url(${srcAttr})`); }); .box { display: flex; justify-content: center; margin-bottom: 10px; } button { font-size: 24px; } .image-box { display: flex; justify-content: center; } .image { height: 250px; width: 250px; background-size: cover; background-repeat: no-repeat; }

Пример на JSFiddle.