Подскажите пожалуйста, как сделать смену иконки на кнопке при клике на нее

Есть кнопка

<button onclick="hidetxt('nn');" class="buttonfirst">
  <p style="margin: 0px px 5px 5px; font-size:17px;">
    Все условия акции
  </p>
  <i style="margin-top: -10px !important;" class="icon-down-open-big"></i>
</button>

Как сделать так, чтобы при клике на нее иконка сменялась на icon-up-open-big


Ответы (1 шт):

Автор решения: nazarpunk

const hidetxt = ($btn) => {
  const $i = $btn.querySelector(`i`);

  $i.classList.toggle(`icon-down-open-big`);
  $i.classList.toggle(`icon-up-open-big`);
}
i.icon-down-open-big:after {
  content: ' down'
}

i.icon-up-open-big:after {
  content: ' up'
}
<button onclick="hidetxt(this,'nn');" class="buttonfirst">
  <p style="margin: 0px px 5px 5px; font-size:17px;">
    Все условия акции
  </p>
  <i style="margin-top: -10px !important;" class="icon-down-open-big"></i>
</button>

→ Ссылка