<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>
This Pen doesn't use any external CSS resources.