Expand and collapse widgets, with button state saved in localstorage

HTML

<div class="widget">
<span>Xenforo Widget Title</span><span align="right" class="expand"><a href="#">🔽</a></span>
  <p class="content"><br />This is the Xenforo widget content<br /><img src="https://xenforo.com/community/styles/default/xenforo/xenforo-logo.svg"></p>
</div>

CSS

.expand a {
  text-decoration: none;
  /* Remove underline */
}

JavaScript

// Check if there's a saved state in localStorage and apply it
$(document).ready(function() {
  $('.content').each(function() {
    var $this = $(this);
    var isOpen = localStorage.getItem('content_' + $this.index());
    if (isOpen === 'true') {
      $this.show();
      $this.closest('.widget').find('.expand a').text('🔼');
      $this.closest('.widget').find('.expand img').hide();
    } else {
      $this.hide();
    }
  });
});

$('.expand').click(function() {
  var $expandButton = $(this).find('a'); // Select the anchor tag inside .expand-one
  var $content = $(this).closest('.widget').find('.content');
  $content.slideToggle('slow', function() {
    var $this = $(this);
    if ($this.is(':visible')) {
      $expandButton.text('🔼');
      $expandButton.find('img').hide();
      localStorage.setItem('content_' + $this.index(), true);
    } else {
      $expandButton.text('🔽');
      $expandButton.find('img').show();
      localStorage.setItem('content_' + $this.index(), false);
    }
  });
});