How to show a livewire component on click?

If you don't need any particular logic in your show-gestiones component regarding $show, if all you need is to hide it from the browser, you have two options - do it with Alpine (which is client-side only), or do it with Livewire (which will do a network request first).

• Here's approach one; Alpine

Here we use x-data, x-on:click and x-show to toggle the state. Simple JavaScript handlers does this all in the frontned - no need with requests to the server to do this. This also means it will created on first render, and always be there.

<div x-data="{ show: false }"
    x-on:click="show = !show"
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body" x-show="show">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        
        <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5 />
    </div>
</div>

• Approach 2: Livewire

Here we can use the magic method $toggle from Livewire to toggle a boolean on or off. You can then wrap your component in an @if condition to that variable. This will also remove the HTML from that Livewire component entirely from the DOM, but it also means that you have to do a roundtrip to the server to do it. This means it will be destroyed when the user hides it, and it will be re-created and re-mounted when its shown.

<div wire:click="$toggle('show')" 
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        @if ($show)
            <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5  />
        @endif
    </div>
</div>