jQuery vs Alpine.js Comparison

jquery-alpine-comparison.html

<!-- jQuery version -->
<div id="jquery-example">
  <button id="btn-jq">Toggle jQuery</button>
  <div id="box-jq" style="display:none;">Halo dari jQuery!</div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('#btn-jq').click(function() {
  $('#box-jq').toggle();
});
</script>

<hr>

<!-- Alpine.js version -->
<div x-data="{ open: false }" id="alpine-example">
  <button @click="open = !open">Toggle Alpine</button>
  <div x-show="open">Halo dari Alpine.js!</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>