From 3ade7d647b9cc13c3ed6643a6c53f373fa81d8c5 Mon Sep 17 00:00:00 2001
From: alex-chevski <frostell.matters@gmail.com>
Date: Wed, 10 Jan 2024 20:47:03 +0300
Subject: [PATCH] added wire transition accordion

---
 .../views/livewire/plan/accordion.blade.php   | 118 +++++++++---------
 1 file changed, 62 insertions(+), 56 deletions(-)

diff --git a/resources/views/livewire/plan/accordion.blade.php b/resources/views/livewire/plan/accordion.blade.php
index 25dbde2..bdb7301 100644
--- a/resources/views/livewire/plan/accordion.blade.php
+++ b/resources/views/livewire/plan/accordion.blade.php
@@ -10,25 +10,27 @@
                 </strong>
                 {{ $options1['short'] ?? '' }}
             </button>
-            <div class="settings__price-body" @style(['display: none' => !$accordionState['options1'], 'display: block' => $accordionState['options1']])>
-                <div class="settings__price-desc">
-                    {{ $options1['description'] ?? '' }}
-                </div>
+            @if ($accordionState['options1'])
+                <div wire:transition.out.opacity.duration.400ms class="settings__price-body">
+                    <div class="settings__price-desc">
+                        {{ $options1['description'] ?? '' }}
+                    </div>
 
-                @isset($options1['items'])
-                    @foreach ($options1['items'] as $item)
-                        <ul class="settings__price-list">
-                            <li>
-                                {{ $item }}
-                                <span class="settings__price-icon icon-check-square"></span>
-                                {{-- <span class="settings__price-icon">-</span> --}}
-                            </li>
-                        </ul>
-                    @endforeach
-                @endisset
-                <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
-                    {{ $options1['price'] ?? '0' }}₽</button>
-            </div>
+                    @isset($options1['items'])
+                        @foreach ($options1['items'] as $item)
+                            <ul class="settings__price-list">
+                                <li>
+                                    {{ $item }}
+                                    <span class="settings__price-icon icon-check-square"></span>
+                                    {{-- <span class="settings__price-icon">-</span> --}}
+                                </li>
+                            </ul>
+                        @endforeach
+                    @endisset
+                    <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
+                        {{ $options1['price'] ?? '0' }}₽</button>
+                </div>
+            @endif
         </div>
 
         @if ($plan->packets_count == 3)
@@ -43,26 +45,28 @@
                     </strong>
                     {{ $options2['short'] ?? '' }}
                 </button>
-                <div class="settings__price-body" @style(['display: none' => !$accordionState['options2'], 'display: block' => $accordionState['options2']])>
-                    <div class="settings__price-desc">
-                        {{ $options2['description'] ?? '' }}
-                    </div>
+                @if ($accordionState['options2'])
+                    <div wire:transition.out.opacity.duration.400ms class="settings__price-body">
+                        <div class="settings__price-desc">
+                            {{ $options2['description'] ?? '' }}
+                        </div>
 
-                    @isset($options2['items'])
-                        @foreach ($options2['items'] as $item)
-                            <ul class="settings__price-list">
-                                <li>
-                                    {{ $item }}
-                                    <span class="settings__price-icon icon-check-square"></span>
-                                    {{-- <span class="settings__price-icon">-</span> --}}
-                                </li>
-                            </ul>
-                        @endforeach
-                    @endisset
-                    <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
-                        {{ $options2['price'] ?? '0' }}
-                        ₽</button>
-                </div>
+                        @isset($options2['items'])
+                            @foreach ($options2['items'] as $item)
+                                <ul class="settings__price-list">
+                                    <li>
+                                        {{ $item }}
+                                        <span class="settings__price-icon icon-check-square"></span>
+                                        {{-- <span class="settings__price-icon">-</span> --}}
+                                    </li>
+                                </ul>
+                            @endforeach
+                        @endisset
+                        <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
+                            {{ $options2['price'] ?? '0' }}
+                            ₽</button>
+                    </div>
+                @endif
             </div>
 
             <div class="settings__price-item">
@@ -76,26 +80,28 @@
                     </strong>
                     {{ $options3['short'] ?? '' }}
                 </button>
-                <div class="settings__price-body" @style(['display: none' => !$accordionState['options3'], 'display: block' => $accordionState['options3']])>
-                    <div class="settings__price-desc">
-                        {{ $options3['description'] ?? '' }}
-                    </div>
+                @if ($accordionState['options3'])
+                    <div wire:transition.out.opacity.duration.400ms class="settings__price-body">
+                        <div class="settings__price-desc">
+                            {{ $options3['description'] ?? '' }}
+                        </div>
 
-                    @isset($options3['items'])
-                        @foreach ($options3['items'] as $item)
-                            <ul class="settings__price-list">
-                                <li>
-                                    {{ $item }}
-                                    <span class="settings__price-icon icon-check-square"></span>
-                                    {{-- <span class="settings__price-icon">-</span> --}}
-                                </li>
-                            </ul>
-                        @endforeach
-                    @endisset
-                    <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
-                        {{ $options3['price'] ?? '0' }}
-                        ₽</button>
-                </div>
+                        @isset($options3['items'])
+                            @foreach ($options3['items'] as $item)
+                                <ul class="settings__price-list">
+                                    <li>
+                                        {{ $item }}
+                                        <span class="settings__price-icon icon-check-square"></span>
+                                        {{-- <span class="settings__price-icon">-</span> --}}
+                                    </li>
+                                </ul>
+                            @endforeach
+                        @endisset
+                        <button type="button" class="settings__price-bid l-btn l-btn-green">Заказать за
+                            {{ $options3['price'] ?? '0' }}
+                            ₽</button>
+                    </div>
+                @endif
             </div>
         @endif
     </div>