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