ToggleVisibility Component

Adds or removes the CSS class visible from the root element, when clicking on an element with the toggle-visiblity class or when calling the toggle() method. Hides the content automatically when clicking outside.

Usage

<style>
    .dropdown .menu {
        display: none;
    }

    .dropdown.visible .menu {
        display: block;
    }
</style>

<div class="dropdown" x-data="ToggleVisibility">
    <button class="toggle-visibility">Toggle me by class</button>
    <div class="menu">I am visible by class</div>
</div>

<div x-data="ToggleVisibility">
    <button x-on:click="toggle">Toggle me by method</button>
    <div x-show="visible">I am visible by property</div>
</div>

Example

I am visible by class

I am visible by property