<div id="component-1" x-data="{ open: false }" @open-me="open=true">
    <div @click="$dispatch('open-me')">Open Me</div>
    <div x-show="open">I've been opened</div>
</div>
<button onclick="document.getElementById('component-1').dispatchEvent(new CustomEvent('open-me', { detail: {}}));">
    Open from Outside the Component
</button>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.4.2/cdn.js