Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle elements with class using Alpine JS?

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/[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>
like image 200
SeaBass Avatar asked Mar 08 '21 01:03

SeaBass


1 Answers

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/[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>
like image 75
dale landry Avatar answered Oct 12 '22 13:10

dale landry