I'm trying out Alpine JS and ing from jQuery. How can I do this in Alpine jS?

$('a').on('click', function(e) {
  $('div').not('.' + $(this).data('class')).hide('slow');
  $('.' + $(this).data('class')).slideToggle();
});

a {
 display: block;
}
 div {
  display: none;
}

<script src=".3.1/jquery.min.js"></script>
<a href="#" data-class="a">Show all A's</a>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<a href="#" data-class="b">Show all B's</a>
<div class="b">B</div>
<div class="b">B</div>

I'm trying out Alpine JS and ing from jQuery. How can I do this in Alpine jS?

$('a').on('click', function(e) {
  $('div').not('.' + $(this).data('class')).hide('slow');
  $('.' + $(this).data('class')).slideToggle();
});

a {
 display: block;
}
 div {
  display: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-class="a">Show all A's</a>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<a href="#" data-class="b">Show all B's</a>
<div class="b">B</div>
<div class="b">B</div>

// EDIT this is pretty close. Any suggestions for improvements? Thanks!

a {
 display: block;
}

<script src="https://cdn.jsdelivr/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<section x-data="{ letter: '' }">
    <a href="#" @click.prevent="letter = (letter === 'a' ? '' : 'a')">Show all A's</a>
    <div x-show.transition.in="letter === 'a'">A</div>
    <div x-show.transition.in="letter === 'a'">A</div>
    <div x-show.transition.in="letter === 'a'">A</div>
    <a href="#" @click.prevent="letter = (letter === 'b' ? '' : 'b')">Show all B's</a>
    <div x-show.transition.in="letter === 'b'">B</div>
    <div x-show.transition.in="letter === 'b'">B</div>
</section>

• javascript
• jquery
• alpine.js

1 Answer 1

Check out their GitHUb page for a list of the directives available and what they do.

Alpine.js GitHub

• x-data Declares a new ponent scope. Wrap your element you wish to toggle in a parent div and initialize the x-data directive and set {show :false} this set the following child elements with the x-show directive to hidden.

• x-show Toggles display: none; on the element depending on expression (true or false). Then set your child elements x-show ="show".

• @click => x-on Attaches an event listener to the element. Executes JS expression when emitted. On your click element, set the x-on directive, or use the @ symbol => @click= set this to show the hidden element. @click="show". Furthermore we use the @click="show = ! show to show when disabled, or hide when enabled.

• x-text Works similarly to x-bind, but will update the innerText of an element. Set the text in the element and use a conditional to change when true/false => x-text="show ? 'Hide all B\'s' : 'Show all B\'s'".

• x-transition Directives for applying classes to various stages of an element's transition.

<script src="https://cdn.jsdelivr/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!--/ x-data pass int he  /-->
<div x-data="{ show: false }">
  <a @click="show = ! show" x-text="show ? 'Hide all A\'s' : 'Show all A\'s'">Show all A's</a>
  <div x-show.transition.in="show" class="a">A</div>
  <div x-show.transition.in="show" class="a">A</div>
  <div x-show.transition.in="show" class="a">A</div>
</div>
<div x-data="{ show: false }">
<a @click="show = ! show" x-text="show ? 'Hide all B\'s' : 'Show all B\'s'">Show all B's</a>
  <div x-show.transition.in="show" class="b">B</div>
  <div x-show.transition.in="show" class="b">B</div>
  <div x-show.transition.in="show" class="b">B</div>
</div>