title: Toggle elements with class using Alpine JS?
body: <p>I'm trying out Alpine JS and coming from jQuery. How can I do this in Alpine jS?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('a').on('click', function(e) {
    $('div').not('.' + $(this).data('class')).hide('slow');
    $('.' + $(this).data('class')).slideToggle();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
   display: block;
  }
   div {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" data-class="a"&gt;Show all A's&lt;/a&gt;
  &lt;div class="a"&gt;A&lt;/div&gt;
  &lt;div class="a"&gt;A&lt;/div&gt;
  &lt;div class="a"&gt;A&lt;/div&gt;
  &lt;a href="#" data-class="b"&gt;Show all B's&lt;/a&gt;
  &lt;div class="b"&gt;B&lt;/div&gt;
  &lt;div class="b"&gt;B&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>// EDIT this is pretty close. Any suggestions for improvements? Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
   display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer&gt;&lt;/script&gt;
  &lt;section x-data="{ letter: '' }"&gt;
      &lt;a href="#" @click.prevent="letter = (letter === 'a' ? '' : 'a')"&gt;Show all A's&lt;/a&gt;
      &lt;div x-show.transition.in="letter === 'a'"&gt;A&lt;/div&gt;
      &lt;div x-show.transition.in="letter === 'a'"&gt;A&lt;/div&gt;
      &lt;div x-show.transition.in="letter === 'a'"&gt;A&lt;/div&gt;
      &lt;a href="#" @click.prevent="letter = (letter === 'b' ? '' : 'b')"&gt;Show all B's&lt;/a&gt;
      &lt;div x-show.transition.in="letter === 'b'"&gt;B&lt;/div&gt;
      &lt;div x-show.transition.in="letter === 'b'"&gt;B&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>