title: Toggling a class on a Tailwind/Alpine.js accordion
body: <p>I've created an accordion with TailwindCSS and Alpine.js which works fine except that I also want to change the icon in the button that expands the content when it's clicked.</p>
  <p>This is what I have:</p>
  <pre><code>&lt;div x-data=&quot;{selected:null,open:true}&quot;&gt;
  
    &lt;dl class=&quot;faqs mx-auto max-w-2xl&quot;&gt;
      &lt;dt&gt;
        &lt;span class=&quot;faq-q&quot;&gt;Question&lt;/span&gt;
        &lt;button
          type=&quot;button&quot;
          class=&quot;faq-toggle&quot;
          @click=&quot;selected !== 1 ? selected = 1 : selected = null, open = open&quot;
          :class=&quot;{ 'faq-open': open, 'faq-close': !(open) }&quot;
        &gt;
          &lt;span&gt;+&lt;/span&gt;
          &lt;span class=&quot;hidden&quot;&gt;-&lt;/span&gt;
        &lt;/button&gt;
      &lt;/dt&gt;
      &lt;dd
        class=&quot;faq-a overflow-hidden transition-all max-h-0 duration-700&quot;
        style=&quot;&quot; x-ref=&quot;container1&quot; x-bind:style=&quot;selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''&quot;
      &gt;
        &lt;div class=&quot;inner&quot;&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.
        &lt;/div&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and a link to a <a href="https://codepen.io/tyssen/pen/YzxGemW" rel="nofollow noreferrer">CodePen</a>.</p>
  <p>What I want to do is toggle the class of the button from <code>faq-open</code> to <code>faq-close</code> when the button is clicked. Although I may actually need to toggle a class on the parent <code>dt</code> too.</p>
  <p>At the moment, the accordion expands when you click on the button, but the class doesn't change.</p>