Toggle elements with class using Alpine JS?

Question

I'm trying out Alpine JS and coming 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.com/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.net/gh/alpinejs/alpine@v2.8.1/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>

score 5 · Answer 1 · answered Mar 08 '21 at 03:18

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

Alpine.js GitHub

x-data Declares a new component 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.net/gh/alpinejs/alpine@v2.x.x/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>

Thank you! That's close. The html is generated and I don't have all A's and B's neatly collected into separate divs so I need to apply it to "all divs with x" etc. Also when you click on A it should hide all B's and the other way around. I added a solution to my code above that works pretty well, although some redundancy. Also I guess slides are not included as default in Alpine. Thanks for your time. I will read up on all of this. — SeaBass, Mar 08 '21 at 03:23

Toggle elements with class using Alpine JS?

1 Answers1