<div x-data="{ socks: 'blue' }">
    <template x-if="socks=='blue'">
        <p>My socks are blue</p>
    </template>
    <template x-if="socks=='green'">
        <p>My socks are green</p>
    </template>
    <button @click="socks = 'green'">Change Sox</button>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js