<button class="eng-btn eng-header-btn js-toggle-search" aria-expanded="false">
  <span class="js-toggle-search--closed">
    <span class="fa fa-search header-icon"></span>
    <span class="sr-only">Öppna </span>SÖK
  </span>

  <span class="js-toggle-search--open" style="display: none;">
    <span class="fa fa-times header-icon"></span>
    STÄNG<span class="sr-only"> sök</span>
  </span>
</button>

<script>
svDocReady(function() {
  const toggleButton = document.querySelector('.js-toggle-search');
  const closedContent = document.querySelector('.js-toggle-search--closed');
  const openContent = document.querySelector('.js-toggle-search--open');
  const searchFieldWrapper = document.querySelector('.hidden-search-module');
  searchFieldWrapper.setAttribute('aria-hidden', 'true');

  toggleButton.onclick = function () {
    toggleButton.setAttribute('aria-expanded', !(toggleButton.getAttribute('aria-expanded') === 'true'));
    searchFieldWrapper.setAttribute('aria-hidden', !(searchFieldWrapper.getAttribute('aria-hidden') === 'true'));

    $svjq(searchFieldWrapper).slideToggle('fast');

    if (closedContent.style.display === 'none') {
      closedContent.style.display = 'block';
      openContent.style.display = 'none';
    } else {
      closedContent.style.display = 'none';
      openContent.style.display = 'block';
    }
  };
});
</script>